胡辣汤教程02，一篇文章全面掌握Flutter里的各种补间动画

众所周知，一个用户体验很好的应用，一定有大量的精美的动画。但是大家要注意，动画不要滥用。动画对于用户体验的提升一般作用在以下几点

1. A到B，明确告知信息的关联性，直观的感受从哪儿来到哪儿去。

2. 提醒关注，需要用户注意到一些关键信息的时候。比如用跳跃的按钮来吸引点击。

3. 愉悦感，这个不用多说，loading动画啦，精美点赞动画等等。

动画的原理

由于视觉有残留的特性，大脑会对前后的视觉信号自动关联上。小时候有没有在字典（页数比较多）的页脚上画过小人呢？字典上的每一页就是F（Frame），你的手指拨动翻页的频率决定了视觉残留的连贯性。比如每秒翻动10页，你动画的FPS就是10。FPS越高，动画的流畅感越强。

• 过去电影一般是24FPS，现在也出现了高帧率的电影

Flutter除了高性能以外，也附带了全面而强大的动画系统

Flutter里的两种动画类型

1. 补间动画Tween

什么叫补间动画呢？就是你提供”起点“和”终点“的属性，动画持续的时间，属性在时间行程上的中间值由补间动画来自动计算。

2. 物理模拟动画

模拟真实世界的行为，比如重力对物体的影响等等。

• 这篇文章我们主要讲讲补间动画

Flutter动画控制器

在Flutter里做动画，一般都需要用到以下几个相关的类

• AnimationController    动画控制器，管理动画相关状态和事件
• Animation    动画的实例，用于获得动画进程中的差值等
• Tween    补间对象，用来做补间计算的

创建动画，首先要创建一个动画控制器

controller = AnimationController(
    duration: const Duration(milliseconds: 1000), //动画持续的时长
    vsync: this   //作用的statefulWidget实例
);
controller.addListener((){
    //动画差值更新事件
});
controller.addStatusListener((status){
    //动画状态事件，如开始，完成等
});

Flutter补间动画

IntTween

整数补间，差值使用round取整

Animation<int> animation=IntTween(begin: 0,end: 200).animate(controller)

StepTween

基于IntTween的整数补间，差值使用floor取整

Animation<Int> animation=StepTween(begin:10,end: 0).animate(controller)

ColorTween

颜色值补间，用于漂亮的颜色变化

Animation<Color> animation=ColorTween(begin: Colors.grey,end: Colors.red).animate(controller)

ReverseTween

反向补间，不管什么补间类型，给你反着弄

Animation<int> animation=ReverseTween(IntTween(begin: 0,end: 200)).animate(controller)

SizeTween

尺寸补间，改变大小的补间

Animation<Size> animation=SizeTween(begin: Size(100,100),end: Size(200,200)).animate(controller)

RectTween

位置及大小补间，可同时改变大小和尺寸的补间

Animation<Rect> animation=RectTween(begin: Rect.fromLTWH(100,100,100,100),end: Rect.fromLTWH(100,100,100,100)).animate(controller)

ConstantTween

一个常量补间，持续给出一个固定值

Animation<int> animation = ConstantTween<int>(5).animate(controller)

Flutter中的补间动画封装得比较细，这么多种，用习惯了tweenlite,tweenmax的前端工程师会觉得不舒服吧。

点不到的爱心

还记得上一篇教程里提到的“技术肥宅”的浪漫——点不到的爱心吗？结合本节教程后实现出来就是这样的。