史上最详细Flutter 动画讲解

1. 动画介绍

动画对于App来说，非常的重要。很多App，正是因为有了动画，所以才会觉得炫酷。移动端的动画库有非常的多，例如iOS上的Pop、web端的animate.css、Android端的AndroidViewAnimations、跨平台的Lottie等。正是因为有了这些封装好的动画库，我们制作酷炫的效果方便了不少。当然了，这些库都是基于各平台基础的动画API实现的，笔者今天要聊的，也就是基础的动画及背后的原理。

1.1 动画的本质

动画顾名思义，就是动起来的画面。画面为什么会动起来了呢？在回答这个问题之前，我们先引入一个概念。

人眼在观察景物时，光信号传入大脑神经，需经过一段短暂的时间，光的作用结束后，视觉形象并不立即消失，这种残留的视觉称“后像”，视觉的这一现象则被称为“视觉暂留”。

视觉暂留被认为是电影的最重要的一个理论基础。我们看到的动画，实际上是一连串的画面组成，只不过是以很快的速度去播放，人眼在下一个画面出来之前，还残留着上一个画面的视觉，看起来就像是在没有间隔的播放这一系列的图片，也就是我们称之为的动画。

1.2 相关概念

动画会有很多相关的概念，理解了这些概念，会对实际的使用更有帮助。

1.2.1 帧

刚才在介绍动画本质的时候，用到了画面这个词汇，只是方便读者去理解，这个画面，在学术上叫做帧。

帧就是影像动画中最小单位的单幅影像画面，一帧就是一副静止的画面。

帧

帧里面又分为关键帧和过渡帧，这两概念是理解一些动画的基础，例如Android中的补间动画。在一些场景中，我们可能不会给出一个动画的所有帧，所以将帧分成关键帧和过渡帧。关键帧可以理解为一个动画的起始状态，而过渡帧则是系统自动完成插在关键帧之间的部分。

关键帧与过渡帧

我们知道Android中的补间动画，基础的有四种类型，平移、缩放、旋转、透明度。而我们设置动画的时候，通常只是设置起始的状态，也就是关键帧，中间过程其实我们并不需要去考虑，如果关注动画速率的话，顶多加一个差值器去控制，但是中间生成的帧我们并没有提供。

系统为什么能够补齐过渡帧呢？我们看下这四种基本的动画类型，给定起始状态，中间状态我们其实是可以通过计算推演出来的，这也是系统为什么能够补齐的原因。

是不是只有这四种才可以通过系统填补过渡帧呢？显然不是的，例如一个跳跃前进的动画，添加一些限制条件，就可以推演出中间的状态。系统提供的只是比较常见的四种，并不是说只有这四种，而是绝大部分动画都可以通过这四种组合实现。当然了，肯定也是有实现不了的，这个时候有一个办法就是通过canvas画出来。

另外再插一嘴，Android系统提供的四种动画操作，也是变换矩阵是四维的原因，具体的就不多说了，之前文章也有介绍过。

最后一嘴，此处讲解帧的概念，拿了很多Android相关的知识去讲解，只是希望读者能够通过一些已知的概念，去理解一些未知的。动画的原理都一样，具体到某个平台，可能顶多就是实现或者叫法不一样罢了。

1.2.2 帧数与FPS

小时候很多人都玩过书角动画。在书或者本子的一角，每一页都画上一个画面，然后拨书角，不同速度拨，动画的感受不一样，拨的越快，动画越流畅。这是为什么呢？这就牵扯到帧数与FPS了。

帧数，帧的数量。FPS（Frame per Second），即每秒显示帧数。

这两个概念，主要是FPS有什么作用呢？这是因为人眼生理构造的原因。人眼残留镜像的时间是有限的，如果过了这个时间，下一帧还没有变化，就会感觉不流畅。但也不是帧数越大越好，毕竟人眼也是有极限的。

帧数不同的感觉

1.2.3 插值器

如果动画播放一直都是这种匀速的进行，那表现形式就太单一了。那如何实现非线性的动画效果呢，这个时候就需要用到插值器了。

插值器其实并不复杂，就是一个数学函数，设置属性值从初始值过渡到结束值的变化规律。每个平台都有自己定义好的一系列插值器，可以供开发者选择使用，也提供自定义的接口，本质上是一个贝塞尔函数。

一个匀速插值器如下：

属性值百分比 = 时间百分比

1.3 如何实现

动画的基本原理和一些基本概念都介绍了一下，现在来聊一下动画的实现。

先抛开系统层级的各种渲染优化，也仅仅是以补间动画为例，假设以现有的移动平台基础上，去实现一套简单的动画框架，该如何去实现呢？

以Android的为例，要实现平移、缩放、旋转、透明度这四种基础的补间动画，可以看到，这些都是基于某个属性的动画，平移是基于point、缩放是基于scale、旋转是基于angle、透明度是基于alpha。

结合插值器，提炼出一个通用的动画类，这个类的作用是根据插值器，得到视图某个时间点的属性变化的状态。

既然各个时间点的状态已经有了，剩下来的就是让各个状态渲染出来。底层的机制在此处不去讨论，这个地方就需要一个定时器，定时器的作用是每隔一段时间就把素材渲染到屏幕上。

至此，一个简易的动画框架就出来了。如果对各平台比较了解的话，就知道我说的是视图动画，真正的动画引擎不是这么简单，涉及到的技术也比较复杂，但是大体的思想不会有错，不管是哪种动画，都是跟时间相关的帧序列，只是实现方式不同。

这也是笔者为什么花这么多篇幅去介绍动画相关的概念，知道一些底层原理后，不管什么平台，怎么去实现，底层的思想肯定都差不多，只是实现上的不同。

2. 其他平台的动画

Flutter动画，与Android、iOS等平台对比，其实本身并没有什么特别之处。基本的原理是一样的，只是提供的种类以及实现的方式不同罢了。

2.1 Android动画

Android的动画，大的分类有两种：

视图动画（View Animation）
属性动画（Property Animation）

视图动画又可以分为两类：

补间动画（Tween Animation）
逐帧动画（Frame Animation）

这之间的差别是什么呢？它们只有实现上的差别

补间动画是根据初始状态，系统自动补充中间状态；
逐帧动画则是需要我们提供每一帧；
视图动画只是作用于视图上，而不会改变控件的属性；
属性动画则是会实实在在的更改控件的属性。

可以看出Android的动画分类还是比较明晰的。

2.2 iOS动画

iOS很久没弄了，在这里也简单说下，不对的话还请各位指正。

隐式动画
显式动画

显式动画又可以分为两类：

基础动画
关键帧动画

这些动画类别之间的差别是什么呢？

隐式动画，顾名思义是不指定动画类型，更改某个属性，Core Animation来决定如何且何时去做动画；
基础动画，根据起始值来做动画；
关键帧动画，则是定义一系列关键帧，系统自动补齐中间的过渡帧。

通过动画这一块儿，可以看出iOS的分类其实是比较的模糊的，有一些历史包袱。

2.3 css动画

css动画大体上有两种：

Transition
Animation

web中的动画分类简单的多了

Transition动画，给定起始值，可以结合插值器做动画；
Animation动画，则是定义一系列关键帧，系统补齐中间的过渡帧。

2.4 小节

通过上面个平台动画粗略的介绍，动画在不同平台虽然被叫着不同的名称，本质上其实都差不多的，变来变去都是这几种方式，要么根据属性要么根据关键帧，要么更改绘制层，要么更改控件本身属性。一些游戏引擎，虽然我没有看，但是我觉得原理也大致相似。

3. Flutter动画

上面铺垫了这么多，终于到Flutter动画了。Flutter是一门比较新的技术，历史包袱理应说是最小的。

3.1 Flutter动画分类

Flutter动画分为两类：

补间动画（Tween Animation）
基于物理的动画（Physics-based animation）

补间动画很好理解，基于物理的动画是这个什么鬼。

基于物理的动画是一种遵循物理学定律的动画形式

举个例子，比方说你滑动一张图片，这个过程不是匀速的，而是起始速度快，然后慢慢的降速，就像一本书在地上往前推一样。它有什么特点呢？

遵循物理学定律；
能够依据加速度和速度去计算和更新每一帧的动画数值；
当受力平衡时，动画为处于恒定运动或静止状态。

哈哈，最后一点是不是似曾相识，这样做的好处是什么呢？随着人们生活水平的极大提升，移动端硬件这些年也是赶英超美，人们不再满足于简单的动画，于是就有部分有（xian）识（de）之（dan）士（teng），实现了基于物理学定律的动画。

这种动画iOS或者Android有没有呢，是有的，但不是作为最基础的动画API被提供。为什么其他平台没有将这个纳入最基本的动画中去呢？

历史原因。iOS以及Android端多年前就诞生了，那个时候，硬件资源都是极其有限的，当时的环境不足以支撑这种动画效果。但也不是说没有，一些游戏引擎里面也是有的，但是作为操作系统，把这些集成进去，还是不太现实的。
认知过程。电脑以及移动端这些年的发展，最开始只是满足于查看最简单的文本，然后各种图片视频。随着互联网的越来越普及，人们的需求越来越多了。于是，在一些游戏里面才会见到的基于物理学定律的动画，进入了寻常百姓家。反观一下，现在也是有非常多的“委屈”事物。例如人类几千年都是通过人眼看现实的事物，现在却被限制在一个小屏幕上，这其实是不合理的。所以AR、VR，还有一些动画片科幻片中的远程感知等技术，才会层出不穷，当然这个扯的有些远了。

基于物理的动画这么好，那有什么好处呢？更自然，更加符合人们的认知。

3.2 分类的原因

前面讲的各平台的动画，从本质上看，基于某个属性也好，帧动画也好，都是从一种状态到另一种状态，而中间过程是可以推演出来的，所以Flutter提供补间动画。

基于物理的动画，我猜测可能是为了实现其他平台上的一些效果，例如弹簧、阻尼效果等等。所以Flutter就提供了这种动画API，毕竟没什么包袱。

3.3 动画模式

Flutter提炼了三种动画模式，与其说提炼出来的，倒不如说统一不能更为合适。

list、grid中的动画（Animated list or grid）。场景是item的添加或者删除操作；
转场动画（Shared element transition）。场景是当前页面打开另一页面的过渡动画；
交错动画（Staggered animation）。场景是需要部分或者完全交错的动画。

3.4 复杂度

Flutter的实现原理以及这个阶段，注定了做动画是非常麻烦的一件事情。跨平台的技术做动画都麻烦，这个似乎是通识，为了跨平台而同化的一些东西，到异化部分，就变得蛋疼了，动画正是这种存在。

Flutter做动画复杂体现在哪些地方呢？

实现的动画较少，这个是初期，没啥好说的；
动画实现的方式复杂，这个是Flutter的设计思想所决定的。

1. 介绍

本文会从代码层面去介绍Flutter动画，因此不会涉及到Flutter动画的具体使用。

1.1 Animation库

Flutter的animation库只依赖两个库，Dart库以及physics库。animation是采用Dart编写的，所以依赖Dart库是很正常的。physics库是什么呢？

Simple one-dimensional physics simulations, such as springs, friction, and gravity, for use in user interface animations.

physics库是一个简单的物理模拟的库，包含弹簧、阻尼、重力等物理效果。前篇文章介绍过Flutter动画，Flutter动画两个分类中的一个就是基于物理的动画（Physics-based animation）。所以可以猜测出animation库中有一部分代码，是实现了另一种动画–补间动画（Tween Animation）。

通过这种库的划分，也可以大致猜测出，基于物理动画的库是后续添加的。这说明了什么呢？

补间动画是现代移动端相对基础的动画类型，这个是必须的；
基于物理动画是在体验上的改善添加上去的，大致可以猜测出为iOS端的体验优化；

1.2 Physics库

Flutter基于物理的动画，实际上是相当简单的。目前实现了弹簧、阻尼、重力三种物理效果，整个库的代码量也不多。详细的代码在下面的部分介绍，在此处，我们先来说下基于物理的动画库的原理。

基于物理的动画，给我们的感觉会更真实，这是因为其更符合人们日常生活的感官。例如做一个球体下落的动画，如果是匀速的下落，给人的感觉会不够真实，实际的生活经验告诉我们，球体自由下落应该是会有先慢后快的一个过程。如果让我们自己去实现这么一个动画效果，我们会怎么去处理呢？

高中物理我们学习过自由落体相关的概念，其中的位移计算公式：

s = 1/2 * g * t * t

从公式中我们知道，自由落体的位移跟时间不是线性关系。我们可以根据这个公式，来实时的计算出位移来。

如果是摩擦阻尼或者弹簧呢，也都有相关的物理公式，我们所谓的基于物理的动画库，也就是基于此类公式来实现的，本质上还是补间动画，只不过过程遵循物理规律比较复杂罢了。

2. Animation库

讲解这一部分，也考虑过将Flutter的动画原理先介绍一下。想了想，前一篇文章介绍过这些普世的动画原理，Flutter只不过是特定平台的实现，无非是实现手段的不同，因此，Flutter动画原理的解析，放到本文最后的小节部分，在代码的基础上去解释，笔者觉得更加好理解。

2.1 animation.dart

animation.dart定义了动画的四种状态，以及核心的抽象类Animation。

2.1.1 动画的四种状态

这个文件中定义了Animation的四种状态：

dismissed：动画的初始状态
forward：从头到尾播放动画
reverse：从尾到头播放动画
completed：动画完成的状态

2.1.2 Animation类

Animation类是Flutter动画中核心的抽象类，它包含动画的当前值和状态两个属性。定义了动画的一系列回调,

动画过程中值变化的回调：

void addListener(VoidCallback listener);
void removeListener(VoidCallback listener);

状态的回调函数：

void addStatusListener(AnimationStatusListener listener);
void removeStatusListener(AnimationStatusListener listener);

2.2 curve.dart

A curve must map t=0.0 to 0.0 and t=1.0 to 1.0.

看到这段英文，首先会想到什么？没错，插值器。Curve也是一个抽象类，定义了时间与数值的一个接口。

double transform(double t);

例如一个线性的插值器，实现代码如下。

class _Linear extends Curve {
const _Linear._();

@override
double transform(double t) => t;
}

该文件下面定义了非常多类型的插值器，具体的实现不一一展开了。Flutter定义了一系列的插值器，封装在Curves类中，有下面13种效果。

linear
decelerate
ease
easeIn
easeOut
easeInOut
fastOutSlowIn
bounceIn
bounceOut
bounceInOut
elasticIn
elasticOut
elasticInOut

如果上面的13种还不满足需求的话，还可以使用Cubic类来进行自定义的构造。可以看出这块儿实现参考了web中的相关实现。

2.3 tween.dart

该文件定义了一系列的估值器，Flutter通过抽象类Animatable来实现估值器。关于Animatable，我们可以先看下其定义。

An object that can produce a value of type T given an [Animation] as input.

可以根据不同的输入，产出不同的数值。通过重载下面的函数来产生不同的估值器。

T transform(double t);

它的最主要的子类是Tween，一个线性的估值器，实现如下，非常的简单，就是一个线性函数。

T lerp(double t) {
assert(begin != null);
assert(end != null);
return begin + (end - begin) * t;
}

@override
T transform(double t) {
if (t == 0.0)
return begin;
if (t == 1.0)
return end;
return lerp(t);
}

在Tween的基础上实现了不同类型的估值器。

ReverseTween
ColorTween
SizeTween
RectTween
IntTween
StepTween
ConstantTween

还可以通过自定义的插值器去实现估值器，例如通过curve实现的估值器CurveTween。

2.4 animation_controller.dart

动画的控制，就在这个文件下面实现，其中最重要的部分是AnimationController，它派生自Animation类。

AnimationController的功能有如下几种：

播放一个动画（forwaed或者reverse），或者停止一个动画；
设置动画的值；
设置动画的边界值；
创建基于物理的动画效果。

默认情况下，AnimationController是线性的产生0.0到1.0之间的值，每刷新一帧就产出一个数值。AnimationController在不使用的时候需要dispose，否则会造成资源的泄漏。

2.4.1 TickerProvider

提到AnimationController必须要先说一下TickerProvider。

An interface implemented by classes that can vend Ticker objects.

TickerProvider定义了可以发送Ticker对象的接口，

Ticker createTicker(TickerCallback onTick);

Ticker能干什么呢？

Tickers can be used by any object that wants to be notified whenever a frame triggers.

它的主要作用是获取每一帧刷新的通知，作用就显而易见了，相当于给动画添加了一个动起来的引擎。

2.4.2 AnimationController

现在再次回到AnimationController。上面为什么要先说一下TickerProvider呢，这是因为AnimationController的构造函数中需要一个TickerProvider参数。

结合上面介绍的插值器、估值器以及Ticker回调，AnimationController大致的工作流程，我相信很多人都可以理出来了。

随着时间的流逝，插值器根据时间产生的值作为输入，提供给估值器，产生动画的实际效果值，结合Ticker的回调，渲染出当前动画值的图像。这也是补间动画的工作原理。

补间动画

AnimationController具体的源码不做分析了，可以看到Flutter的动画实现的其实是相当的原始，AnimationController需要一个触发刷新的回调，输出也是值的改变，并不像成熟平台里面的配合View去做动画。

3. Physics库

Physics库基本上就是插值器的实现部分，这部分比较简单

Physics动画库

Simulation定义了基于物理动画的相关接口，具体有位置、速度、是否完成以及公差（Tolerance）

double x(double time);
double dx(double time);

GravitySimulation的实现如下，其中_a加速度，_x是初始距离，_v是初始速度：

@override
double x(double time) => _x + _v * time + 0.5 * _a * time * time;

@override
double dx(double time) => _v + time * _a;

相信学过高中物理的读者，对这公式不会陌生。其他几种具体实现不在此处一一展开了哈。如果扩展这个物理动画库的话，也很好去扩展，掌握一些物理公式，就可以去仿照实现了。

4. Ticker

关于动画的驱动，在此简单的说一下，Ticker是被SchedulerBinding所驱动。SchedulerBinding则是监听着Window.onBeginFrame回调。

Window.onBeginFrame的作用是什么呢，是告诉应用该提供一个scene了，它是被硬件的VSync信号所驱动的。

具体可以查看sky_engine下面的window.dart的实现，不做展开了。

好了，以上是本文所有内容，希望对大家有所帮助，也希望大家对码农之家多多支持，你们的支持是我创作的动力！祝大家生活愉快！