Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to make a rocket launch animation based on Flutter". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to make a rocket launch animation based on Flutter" can help you solve your doubts.

AnimatedPositioned introduction

The AnimatedPositioned component is actually used in a similar way to AnimatedContainer. It's just that AnimatedPositioned is a replacement for Positioned components. The constructor is defined as follows:

Const AnimatedPositioned ({Key? Key, required this.child, this.left, this.top, this.right, this.bottom, this.width, this.height, Curve curve = Curves.linear, required Duration duration, VoidCallback? OnEnd,})

The front parameters are the same as Positioned, followed by animation control parameters, and these parameters are defined the same as those of AnimatedContainer:

Curve: animation effect Curv

Duration: animation duration

OnEnd: callback after the end of animation.

We can change the parameters such as left,top,width to achieve the effect of animation transition. For example, our rocket launch is realized by modifying bottom (flight altitude control) and width (size control).

Realization of Rocket launch Animation

With the above two analyses, the rocket launch animation is simple! The complete code is as follows:

Class RocketLaunch extends StatefulWidget {RocketLaunch ({Key? Key}): super (key: key); @ override _ RocketLaunchState createState () = > _ RocketLaunchState ();} class _ RocketLaunchState extends State {var rocketBottom =-80.0; var rocketWidth = 160.0 Override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: Text), brightness: Brightness.dark, backgroundColor: Colors.black,), backgroundColor: Colors.black, body: Center (child: Stack (alignment: Alignment.bottomCenter) Children: [Image.asset ('images/earth.jpeg', height: double.infinity, fit: BoxFit.fill,), AnimatedPositioned (child: Image.asset (' images/rocket.png', fit: BoxFit.fitWidth,) Bottom: rocketBottom, width: rocketWidth, duration: Duration (seconds: 5), curve: Curves.easeInCubic,),],), floatingActionButton: FloatingActionButton (child: Text ('launch', style: TextStyle (color: Colors.white,) TextAlign: TextAlign.center,), onPressed: () {setState () {rocketBottom = MediaQuery.of (context) .size.height RocketWidth = 40.0;});},),);}}

At first, the bottom was set to negative in order to hide the fireworks of the rocket, so that it would feel more. Then, when the launch button is clicked, it can be done by changing the bottom distance and rocket size through setState.

After reading this, the article "how to make a rocket launch animation based on Flutter" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.