史上最详细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的实现，不做展开了。
好了， 以上是本文所有内容，希望对大家有所帮助，也希望大家对码农之家多多支持，你们的支持是我创作的动力！祝大家生活愉快！