flutter 动画_一篇文章全面掌握Flutter里的各种补间动画

近期热门：做了一夜动画，就为让大家更好的理解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 

Flutter补间动画

IntTween

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

Animation

StepTween

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

Animation

ColorTween

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

Animation

ReverseTween

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

Animation

SizeTween

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

Animation

RectTween

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

Animation

ConstantTween

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

Animation

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

点不到的爱心

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

源码仓库

https://github.com/ezshine/flutter_course_examples​github.com