近期热门：做了一夜动画，就为让大家更好的理解Vue3的Composition Api （获得700+点赞）
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的前端工程师会觉得不舒服吧。
点不到的爱心
还记得上一篇教程里提到的“技术肥宅”的浪漫——点不到的爱心吗？结合本节教程后实现出来就是这样的。
