flutter 页面加载动画_Flutter实现动画

对于一个前端的App来说，添加适当的动画，可以给用户更好的体验和视觉效果。所以无论是原生的iOS或Android，还是前端开发中都会提供完成某些动画的API。

Flutter有自己的渲染闭环，我们当然可以给它提供一定的数据模型，来让它帮助我们实现对应的动画效果。

一. 动画API认识

动画其实是我们通过某些方式(比如对象，Animation对象)给Flutter引擎提供不同的值，而Flutter可以根据我们提供的值，给对应的Widget添加顺滑的动画效果。

针对动画这个章节，我打算先理清楚他们的API关系和作用，再来讲解如何利用这些API来实现不同的动画效果。

1.1. Animation

在Flutter中，实现动画的核心类是Animation，Widget可以直接将这些动画合并到自己的build方法中来读取它们的当前值或者监听它们的状态变化。

我们一起来看一下Animation这个类，它是一个抽象类：addListener方法每当动画的状态值发生变化时，动画都会通知所有通过

通常，一个正在监听动画的state对象会调用自身的setState方法，将自身传入这些监听器的回调函数来通知 widget 系统需要根据新状态值进行重新构建。

addStatusListener当动画的状态发生变化时，会通知所有通过

通常情况下，动画会从 dismissed 状态开始，表示它处于变化区间的开始点。

举例来说，从 0.0 到 1.0 的动画在 dismissed 状态时的值应该是 0.0。

动画进行的下一状态可能是 forward(比如从 0.0 到 1.0)或者 reverse(比如从 1.0 到 0.0)。

最终，如果动画到达其区间的结束点(比如 1.0)，则动画会变成 completed 状态。

abstract class Animation extends Listenable implements ValueListenable {

const Animation();

// 添加动画监听器

@override

void addListener(VoidCallback listener);

// 移除动画监听器

@override

void removeListener(VoidCallback listener);

// 添加动画状态监听器

void addStatusListener(AnimationStatusListener listener);

// 移除动画状态监听器

void removeStatusListener(AnimationStatusListener listener);

// 获取动画当前状态

AnimationStatus get status;

// 获取动画当前的值

@override

T get value;

1.2. AnimationController

Animation是一个抽象类，并不能用来直接创建对象实现动画的使用。

AnimationController是Animation的一个子类，实现动画通常我们需要创建AnimationController对象。AnimationController会生成一系列的值，默认情况下值是0.0到1.0区间的值；

除了上面的监听，获取动画的状态、值之外，AnimationController还提供了对动画的控制：forward：向前执行动画

reverse：方向播放动画

stop：停止动画

AnimationController的源码：

class AnimationController extends Animation

with AnimationEagerListenerMixin, AnimationLocalListenersMixin, AnimationLocalStatusListenersMixin {

AnimationController({

// 初始化值

double value,

// 动画执行的时间

this.duration,

// 反向动画执行的时间

this.reverseDuration,

// 最小值

this.lowerBound = 0.0,

// 最大值

this.upperBound = 1.0,

// 刷新率ticker的回调(看下面详细解析)

@required TickerProvider vsync,

})

}

AnimationController有一个必传的参数vsync，它是什么呢？之前我讲过关于Flutter的渲染闭环，Flutter每次渲染一帧画面之前都需要等待一个vsync信号。

这里也是为了监听vsync信号，当Flutter开发的应用程序不再接受同步信号时(比如锁屏或退到后台)，那么继续执行动画会消耗性能。

这个时候我们设置了Ticker，就不会再出发动画了。

开发中比较常见的是将SingleTickerProviderStateMixin混入到State的定义中。

1.3. CurvedAnimation

CurvedAnimation也是Animation的一个实现类，它的目的是为了给AnimationController增加动画曲线：CurvedAnimation可以将AnimationController和Curve结合起来，生成一个新的Animation对象

class CurvedAnimation extends Animation with AnimationWithParentMixin {

CurvedAnimation({

// 通常传入一个AnimationController

@required this.parent,

// Curve类型的对象

@required this.curve,

this.reverseCurve,

});

}

Curve类型的对象的有一些常量Curves(和Color类型有一些Colors是一样的)，可以供我们直接使用：

官方也给出了自己定义Curse的一个示例：

import 'dart:math';

class ShakeCurve extends Curve {

@override

double tra