【Flutter 动画探索】Flutter 动画小册已发布

1.欢迎来到Flutter 动画探索

本册的发布，标志着 Flutter 框架底层三位大佬的集结完毕:

另外，如果你不太愿意买小册，也可以下载项目的源码跑跑看，学习一下。

---

2. 想说在前面的话

手势、绘制、动画、布局 四个大部分是界面构成和交互体验的核心，一切可视的展现、交互的触发都脱离不了这四者。 Flutter 作为一个优秀的跨平台框架，但很多人对他并没有全面的认知，只停留在表面的使用上。如果需求的 UI 表现没有内置组件 支持，就无法继续进行，只能找三方库，找不到的话就只能止步于此。这就很容易达到一个瓶颈期： 绘制不会画、手势不太懂、动画不会做、布局一团糟。

目前的三本小册比较系统地介绍了 Flutter 绘制技能、Flutter 手势体系、Flutter 动画体系 三大模块。这些知识可以为你在 Flutter 技术前进的路上扫除一些障碍，让你不再仅限于简单的组件使用，更有能力靠自己去解决一些实际问题。我也很高兴前两本小册可以为大家提供技术上的帮助，你们的肯定让我非常欣慰，也让我觉得自己做的事是有价值的。

---

3.关于阅读源码

现在 内卷 这个词非常火，稍微深入一丢丢，看看源码，就有人吵着 卷 。一个演员，台上三分钟，台下十年功。想磨练自己精进演技，克服表演中的重重困难，这能叫卷吗？干这行的，既然吃这口饭，就要有这份手艺 。如果一个工具会和你朝夕相伴，或可能成为你饭碗的时候，那你对这个工具再怎么深入研究都是不为过的，因为我们就是干这个的。我们自然角色就绝不仅仅是一个使用者，对工具的认识和了解，是工具使用者最基础的能力。

内卷 是供求不平衡下的不合理竞争，这不是放弃精进自己，拓展知识的借口。在源码中藏有很多有价值的宝藏，这些会开拓你的视野，让你更熟悉自己所使用的工具。可以体会作者的用意，思索某个类被定义的意义，发现其中运用的模式，这些都能对我们的编码能力起到一个正反馈循环。即看得越多，体会得越深，你就更容易去阅读源码，汲取的经验也就越多。反之就是一个负反馈，不想看源码，因为看不懂，遇到问题就去搜，搜不到就去问。这样你的目标是解决问题，而不是拥有解决问题的能力。无法有更深层的认识和思考，就很容易出现更多的问题，你面临的就是更多的搜和问 。

授人以鱼不如授人以渔 就是这个道理，不要只是关注解决面前的问题(肚子饿) ，而应更注重解决问题的能力(如何获取食物)。然而，自己看源码确实是一件非常痛苦的事，特别是能力欠佳的朋友，大多数都没有耐心和能力去深究源码的。其中有不少人是想要去深入认识源码如何实现的，奈何火候不到，看不出所以然。所以，我也很愿意去分享自己读码的收获，为这些人指引道路。小册中包含了很多源码的分析，我不想直接给你这条鱼，我想要给你获取鱼的方式。

---

4. 关于Flutter 动画

站在广义的角度，万物的状态都具有运动性。在现实生活中，一个人在跑步，我们感觉在动，是因为在时间变化中，他的位置状态发生了变化。电影的播放，我们感觉在动，是因为在时间变化中，屏幕像素状态发生了变化。一旦属性的变化频率高，我们就会感知到流畅的运动表现。

对于显示设备来说，我们只要按指定的规律高频率地让一个对象的某个属性 进行变化，就可以达到对该属性的动画。比如下面小球的上升，我们能感知到它的运动，只是因为在 1s 内不断让其位置属性变化而已，每个点代表一帧，当一秒可以运动 60 帧，就能感到流畅的动画效果。

可能说到 Flutter 动画 组件，你脑海里会浮现一大堆动画组件，感觉乱七八糟的。为 Flutter 动画组件纷繁复杂，只是因为你浮于世界的表象。就像这绚烂的世界，事物万千，乱花渐欲迷人眼，终也只是由各种元素拼组构成罢了。众多 Flutter 动画组件就相当于基于底层建筑之上的繁华万物，如果你只是为了使用它们，而死记硬背地认识，自然会深陷表象之中，无法窥其奥秘。

本册最主要的目的是为了，让大家了解 Flutter 框架底层是如何让动画运转起来的，从根本上去认知这个世界。最终你会站在世界的顶峰，手握宇宙运行的机制，看着散布于星河中的组件，这就是境界的不同。一切上层的建筑都无法脱离底层运行的机制，对底层的认知贯通之后，上层自然会水到渠成，融会贯通。

---

4. 本册介绍

本册只要分为三个大部分: (注，第一篇为第 0 章)

这本小册对于不同能力阶段的朋友都比较实用，其中 1~6 章是介绍 动画器 及其周边类的使用，较为基础和重要，适合刚入门的新手品尝。7 ~ 11 章介绍一些 Flutter 动画组件的使用及源码实现，适合中等阶段的朋友品尝。最后 12 ~16 章是框架层动画相关源码的分析，适合老手品尝。

---

小册内容概述 - 动画器使用篇

前六章主要是围绕 Animation 、Curve 、Animatable 的使用进行介绍，通一些动画的案例了解 Flutter 中如何处理动画。比如，如何将下面的文字外层的遮罩不断变大:

动画本质上就是状态的不断变更和更新，不通过 Animation 我们依然可以实现一些动画效果。比如使用 Timer 进行周期性任务。

---

在 2 ~ 4 章 我们会全面认识 Animation 、Curve 、Animatable 这三个动画核心类的使用。并且可以让你更直观形象地去看到动画数值变化的过程。比如下面是附加 Curves.bounceOut 运动效果，你就知道，原来它是这样变化的，而不是仅是一个冰冷的单词。

动画控制器有很多开启的方法，通过图形可以更形象认知，比如下面是 reverse 为 true 时，重复开启时，动画控制器数值变化的情况。通过结合图形，可以让大家对动画的认知更为深刻，华罗庚说过：

数缺形时少直观,
形少数时难入微。
数形结合百般好,
隔离分家万事休。

---

第 5 章是通过三个案例，练习巩固动画器的对组件的动画。结合具体的案例可以说明一些操作注意细节。

• 呼吸光晕

• 点击旋转折返

• 绽放菜单

---

第 6 章 通过四个 loading 绘制，练习动画在绘制中的使用。

---

小册内容概述 - 动画组件篇

Flutter 中内置了很多可以执行动画的组件，比如将装饰进行动画的 DecoratedBoxTransition。

透明度动画 AnimatedOpacity 。

某个组件的属性切换动画 AnimatedSwitcher 。

两组间之间的切换动画 AnimatedCrossFade。

这部分还有很多其他的案例，就不一一列举了，文中并不止与对动画组件的使用，更会带大家一起探索源码的实现，不浮于表层，才能认识到一个更真实的世界。

---

小册内容概述 - 源码篇

如果你熟悉了前面两个部分，那么对 Flutter 动画使用方面也算炉火纯青了。当然本册并不止于此，还会去分析整个 Flutter 动画体系 的源码，包括 Animation 、Curve 、Animatable 、以及 Ticker 等。 这部分是本册最核心的知识，如果你一时难以消化，建议先简单了解一下。在之后的开发中多用用动画，随着你对它越来越熟悉，再逐渐去深入了解，这是事物发展的必要过程。

最后一句：由于纯手工码字以及认知的局限性，如果本册内容上有什么错误、疑问、错别字或修改建议，可在小册的评论区指正，或直接联系我进行探讨 ~

---