Flutter动画 2 - Animation、Tween 详解

简述

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

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

Animation、AnimationController

AnimationController 在 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作用则是控制动画.它可以设置动画的时长,并且包含动画的执行方法,具体如下表格所示.

动画执行方法	说明
forward()	正向开始执行动画
reverse()	反向开始执行动画
reset()	重置动画到初始状态
dispose()	取消/停止动画

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

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实现一个最简单的动画就说道这里了,接下来,骚栋带着如何实现动画的顺序执行的相关问题来搞下一篇博客,欢迎大家持续关注.