Flutter动画 2 - Animation、Tween 详解

怼烎@ 2022-11-02 13:18 229阅读 0赞

![aecfaff235b5049666ee621d528e4941.png][]

#### 简述 ####

--------------------

在 [Flutter动画 1 - 实现一个最简单的动画][Flutter_ 1 -] 中,我们只使用到AnimationController就实现了一个简单的动画,但是如果映射的值复杂多变,或者想让值映射成颜色等等,这时候单个AnimationController就不能实现我们的需求了,这时候就需要使用到 **Tween** 以及 **Animation**.

其实在 [Flutter动画 1][Flutter_ 1 -] 中, 我也是用了取巧的方案,对于AnimationController,我们要尽量保持它的单一职责性,他就是来管理动画的执行,过程等,它不应该管控每一个动画的具体实现过程.一个动画的具体实现过程应该由谁实现呢?答案是 **Animation**, 对于 **Tween** 也是要生成 **Animation** 然后再执行.

#### Animation、AnimationController ####

--------------------

AnimationController 在 [Flutter动画 1][Flutter_ 1 -] 简单说了一下.但是 AnimationController 实际上是继承于 Animation.

**Animation** 这个类是一个抽象类,所以我们不常用,我们常使用的是 `Animation<double>` 、`Animation<Color>` 、`Animation<Size>`等. **Animation**主要是用来保存插值和状态(AnimationStatus),它和UI渲染没有太多关系(渲染还是主要通过调用 `setState()` 来实现). 和Android、iOS一样,动画的输出值不一定是线性的,也可以是曲线的,这个是由 `Curve` 来决定的.当然了,Animation也提供了添加监听的方法,分别是`addListener()` 帧回调添加方法 和 `addStatusListener()` 状态回调添加方法.

**AnimationController** 首先是继承于 Animation 的, 相对Animation而言,AnimationController作用则是控制动画.它可以设置动画的时长,并且包含动画的执行方法,具体如下表格所示.

<table> 
 <thead> 
  <tr> 
   <th align="left">动画执行方法</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">forward()</td> 
   <td align="left">正向开始执行动画</td> 
  </tr> 
  <tr> 
   <td align="left">reverse()</td> 
   <td align="left">反向开始执行动画</td> 
  </tr> 
  <tr> 
   <td align="left">reset()</td> 
   <td align="left">重置动画到初始状态</td> 
  </tr> 
  <tr> 
   <td align="left">dispose()</td> 
   <td align="left">取消/停止动画</td> 
  </tr> 
 </tbody> 
</table>

下面就是**Animation** 和 **AnimationController** 两者的UML图,这里只列出了比较常用的方法和属性. (PS:第一次画UML图,可能会有问题,哈哈哈)

![f60c7f76d2de469d23eee6f359f2569f.png][]

#### Tween ####

--------------------

根据上面的说法,如果我们想要把 0 → 1 映射成 0 → 50的话,我们不应该直接修改 AnimationController ,而是通过使用 **Animation** 的方式,这个时候我们通常使用 **Tween** 来生成 `Animation<double>`.回到上一章节的示例.在构建动画的时候,我们就可以按照如下步骤构建动画了.

*  我们先声明一个double类型的Animation成员变量.

Animation<double> _animation;

*  在 `initState` 中,我们需要通过 **Tween** 来实现这个 **\_animation**. `tween`设置区间值为\[0,50\],然后通过`animate()`方法生成Animation,该方法传入参数一般为 **AnimationController**,用于控制动画的执行.具体代码如下所示.

Tween<double> tween = Tween<double>(begin: 0, end: 50);
    _animation = tween.animate(_animationController);

*  接下来就是监听动画帧,然后通过 `setState()` 来重构UI.具体如下所示.

_animation.addListener(() {
      setState(() {});
    });

*  上面两步代码可以合并成如下代码.

_animation = Tween<double>(begin: 0, end: 50).animate(_animationController)
      ..addListener(() {
        setState(() {});
      });

*  那么,如何动态的改变widget的margin值呢,这个时候我们只需要拿到 **\_animation.value** 值就可以了,因为这时候 **\_animation** 的插值区间已经是 \[0, 50\] 了.具体如下所示.

Container(
      ...
      margin: EdgeInsets.only(top: _animation.value),
    ),

--------------------

那么,如果想要动态改变颜色,我们该如何构建呢?我们只需要按照上面的照葫芦画瓢就可以了.具体的构建过程如下所示.

*  声明一个颜色的 **Animation**,具体代码如下所示.

Animation<Color> _colorAnimation;

*  在 `initState()` 方法中对 **\_colorAnimation** 进行如下代码实现.并且交由 **\_animationController** 来管控这个动画.

_colorAnimation = ColorTween(begin: Colors.orangeAccent, end: Colors.redAccent).animate(_animationController)
      ..addListener(() {
        setState(() {});
      });

*  使用也是直接拿到 **\_colorAnimation.value** ,具体代码如下所示.

Container(
      ...
      color: _colorAnimation.value,
      ...
    ),

> 上面的两个动画构建完成之后,我们仍然调用 `_animationController.forward();` 方法.发现两个动画是同步执行的,这时候我们就会有这样的疑问,如果实现动画的顺序执行呢? 骚栋将在下一篇博客中来简单聊聊实现动画的顺序执行的方案.

#### 示例代码 ####

--------------------

这一篇Demo代码仍然比较简单,直接就粘贴到博客中了,具体如下所示.

class FlutterAnimationWidget extends StatefulWidget {
      @override
      _FlutterAnimationWidgetState createState() => _FlutterAnimationWidgetState();
    }
    
    class _FlutterAnimationWidgetState extends State<FlutterAnimationWidget> with TickerProviderStateMixin {
      AnimationController _animationController;
      Animation<double> _animation;
      Animation<Color> _colorAnimation;
    
      @override
      void initState() {
        super.initState();
        _animationController = AnimationController(duration: Duration(milliseconds: 300), vsync: this);
        _animation = Tween<double>(begin: 0, end: 50).animate(_animationController)
          ..addListener(() {
            setState(() {});
          });
        _colorAnimation = ColorTween(begin: Colors.orangeAccent, end: Colors.redAccent).animate(_animationController)
          ..addListener(() {
            setState(() {});
          });
    
        _animationController.addStatusListener((status) {
          if (status == AnimationStatus.completed) print("动画完成");
        });
      }
    
      void startEasyAnimation() {
        _animationController.forward();
      }
    
      @override
      void dispose() {
        _animationController.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  width: 200,
                  height: 50,
                  color: _colorAnimation.value,
                  margin: EdgeInsets.only(top: _animation.value),
                ),
                FlatButton(
                  onPressed: startEasyAnimation,
                  child: Text(
                    "点击执行最简单动画",
                    style: TextStyle(color: Colors.black38),
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }

#### 结语 ####

--------------------

OK,使用Flutter实现一个最简单的动画就说道这里了,接下来,骚栋带着如何实现动画的顺序执行的相关问题来搞下一篇博客,欢迎大家持续关注.

![5fa75a89d61e1b09b61d27fe33e4b993.gif][]

[aecfaff235b5049666ee621d528e4941.png]: /images/20221024/1ceba151ddfe4ddda285223197ce7983.png
[Flutter_ 1 -]: https://blog.csdn.net/qq_33591200/article/details/113953456
[f60c7f76d2de469d23eee6f359f2569f.png]: /images/20221024/bd026494bee6468c8c79c202f40f62d6.png
[5fa75a89d61e1b09b61d27fe33e4b993.gif]: /images/20221024/194c6c8f9b5f402783a6c8ffecb28bd1.png