Flutter - 动画 API 梳理

Flutter 以 Widget 数量多著称，因此 Flutter 中的动画 API 那是一个多啊，我以为有必要梳理一下，你们看的舒服一些。本文不是详细介绍 API，而是帮你们顺利如下其中脉络，给你们归归类，细数都有具体的 API，详细的我有专门的文章去介绍，你们点连接看个人文章就好了

目前转场，共享元素，SVG 动画还没看，其余的都差很少了

---

回顾 android 动画历史

android 中有什么动画，Flutter 差很少就得有什么动画，区别多是 Flutter 拥有后发优点，精简合并和一部分

Android 动画历程以下：

• API 1 - View Animations，也就是补间动画，说实话我也不知道为啥叫这么个没啥关联性的名字。特色是动画做用于 draw 阶段，动画结束后 view 的位置仍是在 layout 时的位置，形成了经典的 view 动画结束后没法相应点击事件的事
• API 11 - View Animations，Object Animator，iew Property Animator 都是属性动画，直接操做 view 的属性，这就能在 layout 阶段时起做用了
• API 19 - Transitions 变换动画，能够在 view 属性改变时插入预设动画
• API 21 - Animated Vector Drawable 矢量动画，API 试用很简单，可是矢量设计这块很麻烦，复杂有点的通常 coder 还真搞不定
• Android X - Physics 物理动画 和 MotionLayout ConstraintLayout 中的动画

Flutter 中也有补间动画，特色和 android 的同样，我可讨厌了，不知道为啥 Flutter 还要把他带上，官方文档上说是为了给 window 用

剩下的 Flutter 动画以 属性动画 和 变换动画 为主，尤为是 变换动画 这块结合了 Transitions、Physics、MotionLayout 众特色于一身。Flutter 中的 Physics 我看更多以插值器的形式出现和配置的

---

Flutter 一切动画的基础

Flutter 一切动画都是基于 AnimatedWidget 开发的(补间动画不知道是否是啊，没看)，而 AnimatedWidget 是对 Flutter 动画核心 API 的集大成者，这些核心动画 API 以下：

• Animation - 动画 API 的基础，全部的动画最终都是用 Animation 类型来承载。Animation 主要职能是保存动画每一帧的数值
• Curve - 动画的插值器，用于动画每帧数值的计算的，这个你们都是熟悉
• AnimationController - 动画的控制器，动画操控，监听部分都写在这里
• Tween - 数值区间，主要用来处理不一样数据类型的数据，好比 widget 动画中最经常使用的 都 double，color 等
• Ticker - 负责分发 async，触发页面 rebuild，详细的去看源码研究，代码通常用不上这个

详细的你们去看个人这篇文章，再次说明这是 Flutter 动画的基础核心，咱们本身改动画 API 也是在 AnimatedWidget 基础上操做，因此你们必定要搞明白

详细的请看：

• Flutter - 动画基础知识点

---

Flutter 补间动画

• Transform.rotate
• Transform.translate
• Transform.scale

就这几个，可见 Flutter 对他也是不怎么上心

---

Flutter 属性动画

和 android 的属性动画如出一辙，思路都没变，这在 Flutter 中叫：内置动画

• SlideTransition - 基于自身倍数的位移动画
• AlignTransition - 对齐动画，核心也是位移，只不过由于对齐方式的变化
• PositionedTransition - 缩放动画，限定父布局只能是 stack
• FadeTransition - 透明度动画
• ScaleTransition - 缩放动画，这个是 android 中的那种缩放动画，能够指定中心点
• SizeTransition - 宽高动画，限制是每次只能执行一个维度的动画，宽和高一块儿不行，那就是缩放动画了
• RotationTransition - 旋转动画，特色是其数值是 0-1 之间的，旋转90度 = 0.25

详细的请看：

• Flutter - 内置动画 API

---

Flutter 变换动画

Flutter 的变换动画融合和 android 中后来出现的动画概念，还包括 LayoutAnimator 布局动画

• AnimatedSwitcher - widget 内容改变时能够播放本身指定的动画
• AnimatedContainer - 带动画的 Container，像 Container 一眼使用，在其中 color、width、height、圆角改变时会触发过分动画，动画不能控制，有些相似与 path 动画
• AnimatedCrossFade - 切换不一样布局时能够显示动画，可是不能本身设置动画，默认就是淡入淡出，而且在大小不通切换时显示很差
• DecoratedBoxTransition - 边框动画，核心是经过圆角角度的改变实现形状上的变化，这个变化是天然过分的，这点和 path 动画是同样了
• AnimatedDefaultTextStyle - 文字样式改变时的切换动画，主要呈现的大小变换方面的动画，颜色的渐变过分不明显，可是体验很差的地方在于，大小字切换时字体粗细的变化真实有点辣眼，有点卡顿
• AnimatedModalBarrier - 颜色改变的变换动画，特殊的地方在于其必须放到所操的 widget 的 child 中，有明确的应用场景，就是点击时改变背景色，好比 dialog 弹出时，背景变灰色
• AnimatedOpacity - 透明度的变化动画
• AnimatedPhysicalModel - 阴影变换动画，设置有些复杂
• AnimatedPositioned - stack 中 widget 位置，大小变换动画
• AnimatedSize - widget 大小变换动画

详细的请看：

• Flutter - 变换动画

---

最后

最后啦，要感谢本身写技术博客的习惯，要不这些资料，这么细谁能记得清楚呢，因此啊你们能写博客就写点，写多休少不重要，重要的是要写。将来的你会感谢如今的本身的

有时我会回来看看本身写的文章，呀的一声，好惊讶啊，原来当时我写的文章这么 NB，这么有深度啊，原来我写了好几十万字啦，好些写小说的都没我写的多哈~