Flutter动画学习路径

设计良好的动画可以使UI感觉更加直观，有助于建立看起来丝滑、感觉起来优雅的APP，并且可以改善用户体验。Flutter的动画体系支持，使得它很容易的实现各种动画。有很多widget，特别是Material widget，在设计的时候已经定义好了标准运动轨迹，当然也支持自定义效果。

那么我们怎么学习呐，不只是学习使用几个动画效果，而是对Flutter的动画体系有个系统的了解。以下内容是看完官方文档总结出的学习路线，帮助大家有个学习的思路，当然，在随后的文章中也会给出相应的教程。

首先是官网上的CookBook教程，里面有四篇文章

• Container 里的动画渐变效果
• Widget 的淡入淡出效果
• Widget 的物理模拟动画效果
• 为页面切换加入动画效果
  中文官网上这几篇都已翻译，每篇文章都比较简单，有DartPad支持在线调试。
  看完这四篇文章基本能够按照示例完成简单的动效，里面会见到很多的API，比如AnimationController、Animation、Tween、Curve等概念，你可能会好奇这些Api是否有关联，在整个动画体系内有什么用？

那么接下来的教程可能会解答你的疑惑

视频	对应文章（英文原文）	对应文章（中文翻译）
如何在 Flutter 中选择合适的动画 Widget     在 Flutter中使用动画的正确选择	How to Choose Which Flutter Animation Widget is Right for You?	【已翻译】
隐式动画基础	Flutter animation basics with implicit animations	【待翻译】
使用 TweenAnimationBuilder 创建独特的隐式动画	Custom Implicit Animations in Flutter…with TweenAnimationBuilder	【待翻译】
使用内置显式动画	Directional animations with built-in explicit animations	【待翻译】
通过 AnimatedBuilder 和 AnimatedWidget 创建一个自定义动画	When should I useAnimatedBuilder or AnimatedWidget?	【待翻译】
深入理解动画	Animation deep dive	【已翻译】

看完这些后你会知道在哪种情况下，如何选择适合自己的动画组件，以及对使用内置隐式动画、自定义隐式动画，以及如何构建显示动画，动画的本质有一定了解。

接下来还有Codelabs, 教程和文章，再看完这些，对开篇说的名词也会理解的更系统了。
通过下面的资源可以很好的学习 Flutter 动画框架。这些文档循序渐进地讲解如何编写动画代码。

• 隐式动画 codelab 视频
  【待翻译】涵盖了如何使用隐式动画的分步说明及交互示例。
• 动画教程 阐释了 Flutter 动画包中的基本类（控制器，动画，曲线，监听器，构建器），这些可以帮助您使用不同的动画 APIs 完成补间动画。
• 使用 Flutter 从零到一, 第一部分 【待翻译】和 第二部分【待翻译】Medium 文章中有介绍如何使用补间动画创建图表动画。
• 使用 Flutter 构建美观 UIs Codelab 演示如何构建简单的聊天应用程序。步骤 7 (应用动画化) 展示了一个新消息动画，使其能从输入区域滑动至消息列表。

动画类型

• 补间动画（Tween animation）
  补间动画是“介于两者之间”的缩写。在补间动画中，定义了起点和终点以及时间轴，再定义过渡时间和速度的曲线。然后框架会计算如何从起点过渡到终点。动画教程中的例子使用了补间动画。
• 基于物理动画（Physics-based animation）
  在基于物理基础的动画中，动作是模拟真实世界的行为来进行建模的。cookbook中的Widget 的物理模拟动画效果，Flutter Gallery
  在 Material 组件 下，Grid 示例演示了一个抛物动画，从网格中选取一个图像并放大，您可以通过使用投掷和拖动来平移图像。

预置动画
官方给出了一些很好的例子，可以引用动画Package 查看示例学习。第三方也有不少优秀的框架比如 simple_animations 也推荐学习一波。

常见动画模式
以上主要是介绍技术点，当然动画也有一些常见的动画模式

• 列表或网格动画
  模式用于在列表或网格中添加或删除元素，代码示例AnimatedList example
• 共享元素转换
  在这个模式中，用户从页面中选择一个元素，通常是图像，然后 UI 会在新页面中为指定元素添加动画，并生成更多细节。在 Flutter 中，您可以通过 Hero widget 轻松实现路径（页面）间的共享元素转换动画。Hero animations(主动画) 如何创建两种风格的 Hero 动画：1.当改变位置和大小时，Hero 从一页飞至另一页。2.Hero 的边界改变形状由圆变方，同时从一页飞至另一页。Flutter Gallery中的 Shrine中也有关于Hero动画的示例。
• 交织动画
  动画被分解成较小的动作，其中一些动作被延迟。这些小动画可以是连续的，也可以部分或完全重叠。交织动画

这里的Hero动画及交织动画建议打好前面基础后好好研究一下，复杂的特效动画，来源于小动画的组合。

此外还有一些资源，以供学习：
动画相关的widget
动画库
Flutter Samples
Animation videos from the Flutter YouTube channel

这里是按照官网梳理的学习路径，不用担心疏漏，官网的教程都在这里面了，里面有9篇待翻译的文章，我已经翻译两篇，这里会同步更新，希望和大家一起学习。

之后也会按照自己的理解与实践再进行总结与动画实战的剖析。