flutter 点击旋转动画_Flutter 动画详解（一）

1. 动画介绍

动画对于App来说，非常的重要。很多App，正是因为有了动画，所以才会觉得炫酷。移动端的动画库有非常的多，例如iOS上的Pop、web端的animate.css、Android端的AndroidViewAnimations、跨平台的Lottie等。正是因为有了这些封装好的动画库，我们制作酷炫的效果方便了不少。当然了，这些库都是基于各平台基础的动画API实现的，笔者今天要聊的，也就是基础的动画及背后的原理。

1.1 动画的本质

动画顾名思义，就是动起来的画面。画面为什么会动起来了呢？在回答这个问题之前，我们先引入一个概念。人眼在观察景物时，光信号传入大脑神经，需经过一段短暂的时间，光的作用结束后，视觉形象并不立即消失，这种残留的视觉称“后像”，视觉的这一现象则被称为“视觉暂留”。

视觉暂留被认为是电影的最重要的一个理论基础。我们看到的动画，实际上是一连串的画面组成，只不过是以很快的速度去播放，人眼在下一个画面出来之前，还残留着上一个画面的视觉，看起来就像是在没有间隔的播放这一系列的图片，也就是我们称之为的动画。

1.2 相关概念

动画会有很多相关的概念，理解了这些概念，会对实际的使用更有帮助。

1.2.1 帧

刚才在介绍动画本质的时候，用到了画面这个词汇，只是方便读者去理解，这个画面，在学术上叫做帧。帧就是影像动画中最小单位的单幅影像画面，一帧就是一副静止的画面。

帧里面又分为关键帧和过渡帧，这两概念是理解一些动画的基础，例如Android中的补间动画。在一些场景中，我们可能不会给出一个动画的所有帧，所以将帧分成关键帧和过渡帧。关键帧可以理解为一个动画的起始状态，而过渡帧则是系统自动完成插在关键帧之间的部分。

我们知道Android中的补间动画，基础的有四种类型，平移、缩放、旋转、透明度。而我们设置动画的时候，通常只是设置起始的状态，也就是关键帧，中间过程其实我们并不需要去考虑，如果关注动画速率的话，顶多加一个差值器去控制，但是中间生成的帧我们并没有提供。

系统为什么能够补齐过渡帧呢？我们看下这四种基本的动画类型，给定起始状态，中间状态我们其实是可以通过计算推演出来的，这也是系统为什么能够补齐的原因。

是不是只有这四种