设计良好的动画可以使UI感觉更加直观，有助于建立看起来丝滑、感觉起来优雅的APP，并且可以改善用户体验。Flutter的动画体系支持，使得它很容易的实现各种动画。有很多widget，特别是Material widget，在设计的时候已经定义好了标准运动轨迹，当然也支持自定义效果。
那么我们怎么学习呐，不只是学习使用几个动画效果，而是对Flutter的动画体系有个系统的了解。以下内容是看完官方文档总结出的学习路线，帮助大家有个学习的思路，当然，在随后的文章中也会给出相应的教程。
首先是官网上的CookBook教程，里面有四篇文章
- Container 里的动画渐变效果
- Widget 的淡入淡出效果
- Widget 的物理模拟动画效果
-
为页面切换加入动画效果
中文官网上这几篇都已翻译，每篇文章都比较简单，有DartPad支持在线调试。
看完这四篇文章基本能够按照示例完成简单的动效，里面会见到很多的API，比如AnimationController、Animation、Tween、Curve等概念，你可能会好奇这些Api是否有关联，在整个动画体系内有什么用？
那么接下来的教程可能会解答你的疑惑
系列文章：
看完这些后你会知道在哪种情况下，如何选择适合自己的动画组件，以及对使用内置隐式动画、自定义隐式动画，以及如何构建显示动画，动画的本质有一定了解。
接下来还有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篇待翻译的文章，我已经翻译两篇，这里会同步更新，希望和大家一起学习。
之后也会按照自己的理解与实践再进行总结与动画实战的剖析。
