This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

preface

The shenzhou 13 spacecraft was launched at 0:23 Beijing time on October 16, and the three astronauts have been successfully stationed in the space station for a six-month “space travel” life.The rapid development of the country’s space technology has also made island code farmers proud. Today, I saw the animation knowledge of FlutterAnimatedPositionedThis component can be used to control the relative position movement of components. Combined with the launch of the Shenzhou 13, brainwave, just can be usedAnimatedPositionedThis component implements rocket launch animation. No more words, first effect!

The effect that

This is actually a superposition of two images, one of the background of the earth’s sky, and one of the rocket. There are two changes to a rocket during launch:

  • Higher and higher height, in fact, relative to the background image of the bottom of the position is bigger and bigger to achieve;
  • Smaller and smaller, this controls the size implementation of the entire component.

And the rocket is getting faster and faster. I tried a few of the Flutter curves and found that easeInCubic works well, it starts slow and gets faster and faster, similar to a rocket launch.

AnimatedPositionedintroduce

The AnimatedContainer is actually used in a similar way to the AnimatedContainer. Just the animatedtraveler is a substitute for the small piece of space. 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,
  }) 
Copy the code

The front parameters are the same as the toy and the rear are the animation control parameters, which are defined in the same way as in the AnimatedContainer:

  • curve: Animation effect curve;
  • duration: Animation duration;
  • onEnd: Callback after animation ends.

We can change the left, top, width parameters to achieve the effect of animation transition. For example, in our rocket launch, we modify the bottom (flight height control) and width (size control) to achieve.

Rocket launch animation implementation

With the above two analyses, 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 launch'),
        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; }); },),); }}Copy the code

The bottom is initially set to a negative value to hide the rocket’s fireworks and make them feel better. Then when you click the launch button, you can change the bottom distance and the size of the rocket through setState.

conclusion

Through the Shenzhou 13 spacecraft launch, to a rocket animation is not very interesting? Actually, the main piece of knowledge is the application of animatedtourists. The comparative movement of a number of stacked pieces, such as the slider of the progress bar, the slide switch, etc. can be realized by animatedtourists. Players of the Flutter can also play a toy of their own by using the Animatedtoy component!

I am dao Code Farmer with the same name as my wechat official account. This is a column about the introduction and practice of Flutter, providing systematic learning articles about Flutter. See the corresponding source code here: The source code of Flutter Introduction and Practical column. If you have any questions, please add me to the wechat account: island-coder. If you feel you have something to gain, please give three pairs of love as follows:

👍🏻 : a praise to encourage!

🌟 : Collect articles, easy to look back!

💬 : Comment exchange, mutual progress!