Flutter | 通过一个小例子带你认识动画 Animation

个人创建了一个「Flutter 交流群」，可以添加我个人微信 「17610912320」来入群。

首先，我们知道在我们的APP中充斥着各种各样的动画，有的是用 GIF，有的用的 Flare，有的是用的 Lottie...。

而对于 Flutter 原生动画来说，也是非常强大的。

下面就是一个小小的例子：

底部箭头会 「向上移动并且逐渐透明，然后重复该动作」。

关于如何实现，后面再说，先来说一下 Flutter 中的动画基础知识。

动画类型

首先 Flutter 中的动画分为两类：

1.补间动画（Tween）2.基于物理的动画

其中我们常用的就是补间动画，补间动画的含义，引用「Flutter 中文网」的解释：

“介于两者之间”的简称。在补间动画中，定义了开始点和结束点、时间线以及定义转换时间和速度的曲线。然后由框架计算如何从开始点过渡到结束点。

其实动画就是以一连串的画面组成的，而补间动画就是根据时间来计算如何过渡，然后给我们展示一连串的画面。

Animation

Flutter 中的动画系统基于 「Animation」，「Widgets」 可以直接将这些动画合并到自己的 build 方法中来读取它们的当前值或者监听它们的状态变化，或者可以将其作为的更复杂动画的基础传递给其他 widgets。

Animation 是一个抽象类，它主要的功能就是保存动画的状态和值。

一般用 .addListener 方法来添加一个监听器，在这个监听器里你可以获取当前的状态和值，但是这个监听是只要有动作就会回调，如果只想要监听当前的状态，那么就只需要用 .addStatusListener 方法。

「Animation」 的状态有如下几种：

1.dismissed：一般情况，动画会从这个状态开始2.forward：运行时可能是这个3.reverse：：运行时也可能是这个4.completed：完成的时候会变成这个

AnimationController

要创建动画，首先要创建一个 AnimationController。除了Animation本身，AnimationContro