“This is the second day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

preface

This is the last article on how to use basic animation components. We will continue the Transition animation and introduce ScaleTransition. In our previous article we discussed the use of Animation and AnimationController to scale components. This is done by changing the size of the image. For details, see Introduction to Flutter & Real (93)

ScaleTransition can be used directly for situations where you only need to zoom in or out. For example, we created an animation effect where a balloon grows from small to large and feels like being blown up.

ScaleTransition introduction

ScaleTransition is very simple to use, with only three parameters. The constructor is defined as follows.

const ScaleTransition({
  Key? key,
  required Animation<double> scale,
  this.alignment = Alignment.center,
  this.child,
})
Copy the code

The parameters are described as follows:

  • scale: indicates the scaling size of the componentAnimationObject, the actual size of the component is equal to the actual size of the component times the value of the object.
  • alignment: is the starting alignment of the zoom. This parameter controls the zoom direction of components, such as our balloonbottomCenterIt starts to zoom, so that the mouth side of the balloon doesn’t feel like it’s moving.
  • child: Child component to scale.

application

The balloon animation we want to achieve is very simple, find a balloon image (recommend a foreign website to find free PNG image material: www.pngpix.com). Then use an Animation object to control the time and size of the zoom. Because it is getting harder to blow the balloon behind, we set the curve to easeOut (fast then slow). The source code is as follows:

class ScaleTransitionDemo extends StatefulWidget {
  ScaleTransitionDemo({Key? key}) : super(key: key);

  @override
  _ScaleTransitionDemoState createState() => _ScaleTransitionDemoState();
}

class _ScaleTransitionDemoState extends State<ScaleTransitionDemo>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller =
      AnimationController(duration: const Duration(seconds: 10), vsync: this)
        ..repeat();

  // Use custom curve animation transitions
  late Animation<double> _animation =
      CurvedAnimation(parent: _controller, curve: Curves.easeOut);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ScaleTransition'),
        brightness: Brightness.dark,
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: balloon(),
      ),
    );
  }

  @override
  void dispose() {
    _controller.stop();
    _controller.dispose();
    super.dispose();
  }

  Widget balloon() {
    return ScaleTransition(
      alignment: Alignment.bottomCenter,
      child: Image.asset(
        'images/balloon.png', ), scale: _animation, ); }}Copy the code

conclusion

This article describes how to use ScaleTransition to control the size of components to achieve a balloon-like animation. There are many practical applications of ScaleTransition, such as clicking on an image to see a larger image, zooming in on a transition, and the feeling of a camera being pulled from close to far or coming from far away. If you are interested, try out some interesting animations for yourself — after all, playing animations is more fun than simply writing interfaces!

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!