动画效果介绍

设计巧妙的动画可以使UI体验更加直观，使应用程序拥有华丽的视觉效果和感受，提供更好的用户体验。flutter 提供的动画支持可以轻松实现各种动画类型。许多 widgets 尤其是 Material widgets，在其设计规范定义中都自带标准动画效果，不过也支持定制效果。

通过下面的资源可以很好的学习 Flutter 动画框架。这些文档循序渐进地讲解如何编写动画代码。

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

我们也提供一些探讨 Flutter 动画的视频。

AnimatedContainer

Opacity, including the implicit AnimatedOpacity widget

FadeInImage

Hero

Transform

AnimatedBuilder

动画类型

动画分为两类：补间动画和基于物理动画。下面将解释这些术语的含义，并帮助您找到更多相关资源。在一些情况下，我们现有的最佳文档是 Flutter gallery 中的示例代码。

补间动画是“介于两者之间”的缩写。在补间动画中，定义了起点和终点以及时间轴，再定义过渡时间和速度的曲线。然后框架会计算如何从起点过渡到终点。

The documents listed above, such as the animationstutorial are not about tweening,specifically, but they use tweens in their examples.

上文列出的文档，比如教程

在 Flutter 应用里实现动画效果并不是特别针对补间动画的，但是其示例中使用了补间动画。

在基于物理基础的动画中，动作是模拟真实世界的行为来进行建模的。举个例子，当您抛球时，球落地的时间和位置取决于抛出的速度和距离地面的高度。类似地，附在弹簧上的球和附在绳子上的球掉落（和反弹）方式是不一样的。

在 Material 组件 下，Grid 示例演示了一个抛物动画。从网格中选取一个图像并放大。您可以通过使用投掷和拖动来平移图像。

多数 UX 或动画设计人员会发现在设计 UI 时，经常重复使用某些动画模式。本章列举了一些常用的动画模式，并提供更多学习路径。

这种模式用于在列表或网格中添加或删除元素。

AnimatedList example这个来自 Sample App Catalog 的演示展示了如何动态添加元素至列表或删除选定元素。当用户使用 plus (+) 和 minus (-) 按钮修改列表时，会同步到内部 Dart 列表。

在这个模式中，用户从页面中选择一个元素，通常是图像，然后 UI 会在新页面中为指定元素添加动画，并生成更多细节。在 Flutter 中，您可以通过 Hero widget 轻松实现路径（页面）间的共享元素转换动画。

Hero Animations 如何创建两种风格的 Hero 动画：
- 当改变位置和大小时，Hero 从一页飞至另一页。
- Hero 的边界改变形状由圆变方，同时从一页飞至另一页。
Flutter Gallery您可以自己自己创建 Gallery 应用程序，或者到 Play 商店中下载。Shrine 演示中有关于 Hero 动画的示例。
另请参阅 API 文档 Hero,Navigator,PageRoute。

动画被分解成较小的动作，其中一些动作被延迟。这些小动画可以是连续的，也可以部分或完全重叠。

以下链接可以了解更多 Flutter 动画：

如有您有想要查阅的动画文档，请在这里提出。