首先，我们知道在我们的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本身，AnimationController还可以用来控制动画。例如让动画正向播放和停止。
那既然首先要创建一个 AnimationController，那就看看它的构造函数，来了解一下如何创建：
AnimationController({
double value,
this.duration,
this.reverseDuration,
this.debugLabel,
this.lowerBound = 0.0,
this.upperBound = 1.0,
this.animationBehavior = AnimationBehavior.normal,
@required TickerProvider vsync,
}) : assert(lowerBound != null),
assert(upperBound != null),
assert(upperBound >= lowerBound),
assert(vsync != null),
_direction = _AnimationDirection.forward {
_ticker = vsync.createTicker(_tick);
_internalSetValue(value ?? lowerBound);
}
解释一下参数：
1.value：初始化该动画的值2.duration：持续时间3.reverseDuration：reverse 动画持续时间4.debugLabel：一个字符串，用于 Debug5.lowerBound：下界，该动画可以获得的最小值，以及该动画已取消时候的值，不能为空。6.upperBound：上界，该动画可以获得的最大值，以及该动画已完成时候的值，不能为空。7.animationBehavior：配置禁用动画时[AnimationController]的行为。8.vsync：当前上下文的 TickerProvider，可以通过 resync 来更改它，不能为空。
其中 vsync 是必须的，在使用动画的类后面加上 with TickerProviderStateMixin 就ok了。
Tween<T>
由于 AnimationController 的默认值是 0 - 1，那么想要设置 0 - 1 以外的值就要用到 Tween，它可以设置 begin 和 end 值，其中常用的是 Tween<double>，但是也有很多特定类型的 Tween：
•ColorTween•SizeTween•RectTween•CurveTween•...
Tween 本身只是定义了如何在两个值之间插值，如果想要当前具体值，还是需要一个动画的，这里有两种方法来获得当前状态的具体指：
1.evaluate：这种方法适合用于已经写好动画，并且在该动画运行时重新build widget 时比较有效。2.animate：这种方法返回一个 Animation，适用于给一个 Widget使用该 Tween 创建一个新的动画。
实现开始时的效果
首先想一下这个效果：「向上移动并且逐渐透明，然后重复该动作」。
1.向上移动：我们利用 Container 的 margin 属性2.逐渐透明：套一层 Opacity，利用 opacity 属性即可达到3.重复动作：判断动画当前状态，然后重新运行
了解需求以后，先来写控件。
由于我们的动画效果还算有一点点复杂，所以我们用 AnimatedWidget 来封装该组件，避免大量重复的 setState。
所以，动画 Widget 代码如下：
class AnimatedUpArrow extends AnimatedWidget {
final Tween<double> _opacityTween = Tween(begin: 1, end: 0);
final Tween<double> _marginTween = Tween(begin: 0, end: 50);
AnimatedUpArrow({Key key, Animation<double> animation})
: super(key: key, listenable: animation);
@override
Widget build(BuildContext context) {
final Animation<double> animation = listenable;
return SafeArea(
child: Center(
child: Opacity(
opacity: _opacityTween.evaluate(animation),
child: Container(
margin: EdgeInsets.only(bottom: _marginTween.evaluate(animation)),
child: Image.asset("images/UP.png", width: 20, height: 24,),
),
),
),
);
}
}
首先创建两个 Tween，由于是两种动画同时执行，所以这里使用 Tween 的 evaluate 方法来通过动画计算插值是最合适的。
代码很简单，然后看一下如何使用这个 Widget：
AnimationController _animationController;
Animation<double> _animation;
@override
void initState() {
super.initState();
_animationController = AnimationController(
vsync: this, duration: Duration(milliseconds: 1400));
_animation =
CurvedAnimation(parent: _animationController, curve: Curves.linear);
_animationController.addStatusListener((status) {
if (status == AnimationStatus.completed) {
Future.delayed(Duration(milliseconds: 500), () {
_animationController.reset();
});
} else if (status == AnimationStatus.dismissed) {
_animationController.forward();
}
});
_animationController.forward();
}
@override
Widget build(BuildContext context) {
return AnimatedUpArrow(
animation: _animation,
);
}
简单解释一下：
首先定义 AnimationController，定义了动画持续时间为 1400，
然后定义 Animation，设置控制器为刚才的 controller， curve 为线性，
接着定义 StatusListener，在这里判断了动画是否已经执行完成，如果已经完成，则在500毫秒的延迟之后重置动画，并且继续执行动画，这样就达到了动画重复的效果。
最后在 build 方法中传入设置好的 Animation，这样刚才定义好的 AnimatedWidget 就可以根据这个动画来计算插值做动画了。
这样最上面的动画就做好了。
总结
在 Flutter 很多原生控件中，都使用了 AnimatedWidget，比如 AnimatedPositioned，看一下它的 build 方法：
@override
Widget build(BuildContext context) {
return Positioned(
child: widget.child,
left: _left?.evaluate(animation),
top: _top?.evaluate(animation),
right: _right?.evaluate(animation),
bottom: _bottom?.evaluate(animation),
width: _width?.evaluate(animation),
height: _height?.evaluate(animation),
);
可以看得出来，和我们上面用的一样，都是 evaluate 方法。
其实在 Flutter 当中做动画已经很方便了，起码比 Android 舒服，2333。
随时随地看视频
