Flutter使用AnimationController来控制动画效果

Flutter提供了一个相对简单易用的AnimatedContainer和SlideTransition来实现简单的动画效果，但是要完全实现定制化的、复杂的动画效果，你还是需要使用一个AnimationController。

今天我们将尝试使用AnimationController来实现一个绘制图像然后返回原点的动画。

创建一个小部件来为其设置动画

在本文的示例中，我们希望允许拖动图像，然后自动返回到其原始位置。

为了实现此任务，我们首先创建一个放置在界面中间的图像。

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

Align 元素在这里用于将图像对象放置在界面的中心。

接下来，我们希望这个小部件可拖动和可放置，因此将此子部件放入 GestureDetector 中，以拉动适当的响应。

 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,
        ),
      ),
    );
  }

要实现绘制效果，我们需要在GestureDetector的onPanUpdate方法中改变Align位置，所以需要调用setState方法。

在setState方法中，根据手势位置设置Alignment位置，所以这里需要使用MediaQuery来获取屏幕尺寸。

但是现在的结果是随着运动的运动而运动。我们还需要对图像应用动画效果，在松开手后自动返回到原始位置。

让图像移动

由于这次需要改变的是Alignment，所以我们首先用Alignment定义Animation属性：

  late Animation<Alignment> _animation;

接下来我们需要定义AnimationController来处理动画信息，animation并定义us 动画的起点和终点：

  late AnimationController _controller;

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

我们的动画起点是当前图像所在的Alignment，终点在Alignment.center。

Alignment 有一个名为 AlignmentTween 的类，专门表示位置信息，如上面的代码所示。

除了开始和结束之外，我们还需要定义如何从开始移动到结束。这里使用Spring效果进行模拟，所以使用SpringSimulation。

SpringSimulation 需要提供弹簧定义、起始距离、结束距离和初始速度。

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

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

我们使用上面创建的模拟来实现动画：

    _controller.animateWith(simulation);

最后，我们需要在动画完成后执行这个动画：

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

最后，运行输出是这样的：

总结

真元威力强大，但使用起来并不难。我们只需要定义起点和终点，然后定义动画效果即可。

本文示例：https://github.com/ddean2009/learn-flutter.git