Flutter series: Use AnimationController to control animation effects

Introduction

We mentioned before that flutter provides relatively simple and easy-to-use AnimatedContainer and SlideTransition to perform some simple animation effects, but to fully realize customized and complex animation effects, you still need to use AnimationController.

Today we will try to use AnimationController to implement an animation of dragging an image and then returning to the origin.

Build a widget to animate

In the example of this article, we hope to enable a picture to be dragged and then automatically returned to its original position.

In order to implement this function, we first build an image placed in the middle of the interface.

      child: Align(
        alignment: Alignment.center,
        child: Card(
          child: Image(image: AssetImage('images/head.jpg'))
        ),
      )

The Align component is used here to place a picture object in the middle of the interface.

Next, we hope that this widget can be dragged and dropped, so put this child into a GestureDetector, so that the corresponding response can be dragged and dropped accordingly.

 Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return GestureDetector(

      onPanUpdate: (details) {
        setState(() {
          _animateAlign += Alignment(
            details.delta.dx / (size.width / 2),
            details.delta.dy / (size.height / 2),
          );
        });
      },

      child: Align(
        alignment: _animateAlign,
        child: Card(
          child: widget.child,
        ),
      ),
    );
  }

In order to achieve the dragging effect, we need to modify the Align position in the onPanUpdate method of GestureDetector, so we need to call the setState method.

In the setState method, we adjust the position of Alignment according to the position of the gesture, so we need to use MediaQuery to get the size of the screen.

But the effect achieved now is that the image moves with the movement of the gesture. We also need to achieve the animation effect of the image automatically returning to its original position after the hand is released.

Make the image move

Because what needs to be changed this time is Alignment, we first define an Animation property containing Alignment:

  late Animation<Alignment> _animation;

Next we need to define an AnimationController to control animation information and specify the starting point and end point of the animation we need:

  late AnimationController _controller;

      _animation = _controller.drive(
      AlignmentTween(
        begin: _animateAlign,
        end: Alignment.center,
      ),
    );

The starting point of our animation is the Alignment where the current image is located, and the end point is Alignment.center.

Alignment has a class called AlignmentTween that specifically represents location information, as shown in the above code.

With the starting point and end point, we also need to specify the way to move from the starting point to the end point. The simulation here uses the spring effect, so SpringSimulation is used.

SpringSimulation needs to provide a description of the spring, starting distance, ending distance and initial speed.

    const spring = SpringDescription(
      mass: 30,
      stiffness: 1,
      damping: 1,
    );

    final simulation = SpringSimulation(spring, 0, 1, -1);

We use the simulation created above to implement animation:

    _controller.animateWith(simulation);

Finally, we need to execute this animation when the gesture ends:

      onPanEnd: (details) {
        _runAnimation();
      },

Finally, the running effect is as follows:

Summarize

AnimationController is a very powerful component, but it is not that complicated to use. We only need to define the starting point and end point, and then specify the animation effect.

Examples in this article:https://github.com/ddean2009/learn-flutter.git