当前位置：网站首页>Shuttle simulated rocket launch animation

Shuttle simulated rocket launch animation

2022-07-18 14:01:00 【InfoQ】

Preface

Beijing time. 2021 year 10 month 16 Japan 0 when 23 branch , The Shenzhou 13 spacecraft was successfully launched , At present, three astronauts have successfully entered the space station , Begin a 6 Months “ Space travel ” life . Beijing time. 2022 year 4 month 16 Japan 9 when 56 branch , The Shenzhou 13 spacecraft, which has been traveling in space for half a year, landed safely at the Dongfeng landing site , Space “ On a business trip ” Of 3 Astronaut Zhai Zhigang 、 Wang Yaping 、 Ye Guangfu left the cabin safely and smoothly , Return to the embrace of the earth .

null

The rapid development of the country's space technology also makes the yard farmers on the island very proud , See today Flutter Knowledge of animation , I saw it

AnimatedPositioned

This component , It can be used to control the relative position and movement of components . Combined with the launch of Shenzhou 13 at that time , brainwave , You can just use

AnimatedPositioned

This component realizes rocket launch animation . Don't talk much , The first effect ！

Effect description

Here are actually two pictures superimposed , One is a background map of the earth and stars , One is a rocket . There are two changes during the launch of the rocket ：

Higher and higher , In fact, it can be realized by increasing the position relative to the bottom of the picture background ;

Smaller and smaller , This can control the size of the whole component .

Then the animation cancels the selection , The speed of the rocket is getting faster and faster , Tried a few Flutter Self contained curve , Find out

easeInCubic

This effect is very good , It started slow , It's getting faster and faster in the back , It's similar to the process of rocket launch .

`AnimatedPositioned`

Introduce

AnimatedPositioned

The way components are used is actually the same as AnimatedContainer similar . It's just

AnimatedPositioned

yes

Positioned

Substitution of components . The construction method 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 previous parameters and

Positioned

equally , Then there are animation control parameters , The definition and of these parameters

AnimatedContainer

It's the same ：

curve
： Animation effect curve ;

duration
： Animation duration ;

onEnd
： Callback after animation .

We can change

left

top

width

And other parameters to achieve the effect of animation transition . Like our rocket launch , Is to modify

bottom

（ Flight altitude control ） and

width

（ Size control ） To achieve .

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<RocketLaunch> {
 var rocketBottom = -80.0;
 var rocketWidth = 160.0;
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text(' Rocket launching '),
 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;
 });
 },
 ),
 );
 }
}

One of them starts with

bottom

negative , To hide the rocket fireworks , It will feel more . Then when you click the launch button , adopt

setState

Just change the bottom distance and rocket size .

summary

Launched by Shenzhou 13 spacecraft , Is it interesting to have a rocket animation ？ In fact, the main knowledge point of this article is to introduce

AnimatedPositioned

Application . adopt

AnimatedPositioned

It can realize the relative movement and change effect of many stacked components , For example, the slider of the progress bar , Sliding switch, etc . With all of you Flutter Players can also use

AnimatedPositioned

This component will play a fun animation effect by itself ！