Flutter动画（一）

动画的简介：

动画就是指在一段时间内可以快速的改变UI。所谓的“快速”是指多块呢？画流畅度的一个重要指标就是帧率FPS。对于人眼来说，动画帧率超过16FPS，就比较流畅了，超过32FPS就会非常的细腻平滑，而超过32FPS，人眼基本上就感受不到差别了。

Flutter动画的角色：

flutter动画主要涉及Animation、Curve、Controller、Tween这四个角色，它们一起配合来完成一个完整动画，下面我们一一来介绍它们。

Animation:

通过源码我们可以发现，Animation本身是一个抽象类，它本身和UI渲染没有任何关系，而它主要的功能是保存动画的插值和状态。如图1.0，提供2种listener的回调，第一种addListener是对这个动画执行的过程进行回调，没有参数。第二种addStatusListener是对动画执行的状态进行回调。状态回调提供了如图1.1四种状态。

图1.0

图1.1

Curve：

Flutter中通过Curve（曲线）来描述动画过程，我们把匀速动画称为线性的(Curves.linear)，而非匀速动画称为非线性的。如图2.0

图2.0

Curves是一个枚举类型，为我们提供了多个常用的动画曲线，如图2.1。还有其他的曲线就不一一介绍了，读者可以自行查看Curves类的定义。

图2.1

同样我们也可以创建自己的Curve，需要我们继承Curve。去实现transform方法，如图2.2

图2.2

AnimationController：

AnimationController用于控制动画，它包含动画的启动forward()、停止stop() 、反向播放 reverse()等方法。通过源码可以查看到AnimationController派生自Animation<double>,因此可以在需要Animation对象的任何地方使用。同样，AnimationController具有控制动画的其他方法，例如forward()方法可以启动正向动画，reverse()可以启动反向动画。如图3.0创建一个AnimationController的实例：

图3.0

简单说一下参数所代表的含义：

duration：同学们应该也可以猜到执行动画需要的时间。猜到执行动画需要的时间。

vsync: 它接收一个TickerProvider类型的对象，它的主要职责是创建Ticker。Flutter应用在启动时都会绑定一个SchedulerBinding，通过SchedulerBinding可以给每一次屏幕刷新添加回调，而Ticker就是通过SchedulerBinding来添加屏幕刷新回调，这样一来，每次屏幕刷新都会调用TickerCallback。使用Ticker(而不是Timer)来驱动动画会防止屏幕外动画（动画的UI不在当前屏幕时，如锁屏时）消耗不必要的资源，因为Flutter中屏幕刷新时会通知到绑定的SchedulerBinding，而Ticker是受SchedulerBinding驱动的，由于锁屏后屏幕会停止刷新，所以Ticker就不会再触发。通常我们会将SingleTickerProviderStateMixin添加到State的定义中，然后将State对象作为vsync的值，这在后面的例子中可以见到。如果有多个动画的话，我们需要继承TickerProverStateMixin。

lowerBound， upperBound：其实一般我们不需要为它们数值的。因为默认的是指lowbound为0，upperBound为1。AnimationController在给定的时间段内线性的生成从0.0到1.0（默认区间）的数字。如果还是没有懂的话，可以往下看。笔者会在Tween里简单举例。

Tween：

用来表示动画执行的取值范围。默认的时候是[0.0， 1.0]。如图4.0表示开始值为10，结束值为50。之后通过animate将图3.0的controller添加进去。代码的含义就是2s内_animation的value值从10变换到50。

图4.0

接着说controller里的lowerBound和upperBound。如果lowerBound为0，upperBound为5。那么2s内变换的值从10到50 * 5。