第一百一十回 如何实现动画

我们在上一章回中介绍了转场动画相关的内容，本章回中将介绍 如何实现动画.闲话休提，让我们一起Talk Flutter吧。

概念介绍

提到动画相信大家都不陌生，在程序中使用动画可以增加程序酷炫的效果，因此我们有必要掌握动画相关的知识。其实在我们在上一章回中介绍转场动画时已经使用过动画，只是当时使用的是系统提供的动画，本章回中将详细介绍如何实现动画。

实现方法

1. 创建AnimationController类型对象，该类的构造方法中有一个必选参数：vsync表示屏幕刷新时是否通知当前界面，传递了当前对象(this)给它;
2. 自定义Widget类，在类中混入了SingleTickerProviderStateMixin类，这样才能把当前对象传递给vsync参数；
3. 创建CurvedAnimation类型对象，该类主要用来控制动画的插值，比如动画以线性方式播放；
4. 创建Tween类型对象，该类主要用来控制动画的开始值和结束值；
5. 在Tween对象中关联CurvedAnimation类型对象，这样就可以控制动画的播放效果；
6. 创建动画widget类,主要用来更新动画，本质上是AnimatedWidget的子类,通过类的构造方法加入前面步骤中的动画参数；
7. 创建动画Builder,主要用来更新动画，和自定义动画widget类的功能相同,通过类参数加入前面步骤中的动画参数；
8. 通过AnimationController类型对象，释放动画相关的资源；

上面的步骤中的6和7的功能相同，只是实现实现方式不同。我们在实际项目中选择其中一种就可以，常用的是动画Builder;

步骤6中可以控制颜色，大小，位置，角度。把它放到组件的color,size,transform等属性中就可以实现缩放，平移，旋转，渐变动画。上面的介绍的步骤比较抽象，不容易理解，而且步骤中还包含了很多类，接下来我们通过示例代码来演示。

示例代码

class _ExAnimationState extends State<ExAnimation> with SingleTickerProviderStateMixin{
  late final AnimationController _animationController;
  late final CurvedAnimation _animationCurve;
  late final Animation _animationTween;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _animationController = AnimationController(vsync: this,duration: const Duration(seconds: 3),);
    _animationCurve = CurvedAnimation(parent: _animationController, curve:Curves.linear);
    _animationTween = Tween(begin: 100.0,end: 300.0).animate(_animationCurve);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _animationController.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example of Animation'),
        backgroundColor: Colors.purpleAccent,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          ///使用自定义的动画类
          CustomerAnimatedWidget(animation: _animationTween),
          ///使用动画辅助类
          AnimatedBuilder(
            animation: _animationTween,
            builder: (context,child){
              return Icon(Icons.face,size: _animationTween.value,);},
            ///这个child和builder中child参数相同
            // child: Icon(Icons.surround_sound,size: _animationTween.value,),
          ),
          ElevatedButton(
            onPressed: () {
              _animationController.forward();
            },
            child: const Text('start animation'),
          ),
        ],
      ),
    );
  }
}

///自定义动画类是为了提高性能，当动画更新时只调用当前类的build方法，不会调用当前类外层的build方法
class CustomerAnimatedWidget extends AnimatedWidget {
  ///listenable是必选参数
  CustomerAnimatedWidget({super.key, required this.animation}):super(listenable: animation);

  Animation animation;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Icon(Icons.surround_sound,size: animation.value,);
  }
}

上面的代码实现了一个缩放动画，编译并且运行上面的程序，点击播放动画的按钮时就会看到页面中的图标逐渐由小变大，我在这里就不演示程序的运行结果了，建议大家自己动手去实践，这样可以加深对上面动画步骤的理解。

经验分享

在Flutter中实现动画的原理和Android以及IOS相同，都是依靠移动图片的位置，渐变图片的颜色，缩放图片的大小，旋转图片的角度来实现动画效果。以Android中的动画为例做个对比：Android通过配置xml的属性，或者使用Animation类中不同的方法来实现移动，渐变，缩放和旋转操作。而Flutter则是提供了不同的类来实现移动，渐变，缩放和旋转操作。示例代码中只列出了缩放操作的类，其它操作的类遇到后再给大家分享。

此外，Flutter提供的类是环环相扣，相互依赖，比如上面步骤中用到的AnimationController类是动画操作的核心类，它嵌入到了动画效果类中，而动画效果类又和缩放操作类关联在了一起。这样环环相扣实现了一个缩放动画。

在实际项目中动画效果可能比较复杂，它会综合移动，缩放等多个操作在一起组成复合动画，类似Android中的动画集合。这个时候需要我们有立体思维，并且结合多个动画操作才能创造出好看的动画效果。后续章回中，我会给大家分享一些具体的动画效果示例。

看官们，关于"如何实现动画"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!