动画简介

内容

设计精良的动画使 UI 感觉更直观，有助于打造精致应用程序的时尚外观和感觉，并改善用户体验。Flutter 的动画支持使实现各种动画类型变得容易。许多小部件，特别是 Material 小部件，都带有其设计规范中定义的标准运动效果，但也可以自定义这些效果。

选择一种方法

在 Flutter 中创建动画时，你可以采用不同的方法。哪种方法适合你？为了帮助你做出决定，请查看视频，如何选择适合你的 Flutter 动画小部件？（也作为 配套文章 发布。）

（要深入了解决策过程，请观看 Flutter 中的动画做得很好视频，在 Flutter Europe 上展示。）

如视频所示，以下决策树可帮助你在实现 Flutter 动画时决定使用哪种方法

The animation decision tree

如果预打包的隐式动画（最容易实现的动画）满足你的需求，请观看使用隐式动画的动画基础知识。（也作为 配套文章 发布。）

要创建显式动画（由您控制动画，而不是让框架控制），您可以使用其中一个内置的显式动画类。有关更多信息，请观看使用内置显式动画制作您的第一个方向动画。（还以配套文章的形式发布。）

如果您需要从头开始构建显式动画，请观看使用 AnimatedBuilder 和 AnimatedWidget 创建自定义显式动画。（还以配套文章的形式发布。）

要更深入地了解动画在 Flutter 中的工作原理，请观看动画深度剖析。（还以配套文章的形式发布。）

以下资源是开始学习 Flutter 动画框架的不错起点。这些文档中的每一篇都展示了如何编写动画代码。

隐式动画 Codelab
介绍如何使用隐式动画，并提供逐步说明和交互式示例。
动画教程
解释了 Flutter 动画包中的基本类（控制器、Animatable、曲线、侦听器、构建器），因为它指导您使用动画 API 的不同方面进行一系列补间动画。本教程展示了如何创建您自己的自定义显式动画。
Flutter 从零到一，第 1 部分和第 2 部分
Medium 文章，展示如何使用补间创建动画图表。
在 Web 上编写您的第一个 Flutter 应用
Codelab 演示如何创建表单，该表单使用动画来显示用户在填写字段时的进度。

一般来说，动画要么是补间动画，要么是基于物理的动画。以下部分解释了这些术语的含义，并指出了可以了解更多信息的资源。

补间的简称。在补间动画中，定义了开始点和结束点，以及时间线和定义过渡时间和速度的曲线。框架计算如何从开始点过渡到结束点。

上面列出的文档（例如动画教程）并不是专门针对补间的，但它们在示例中使用了补间。

在基于物理的动画中，运动被建模为类似于现实世界的行为。例如，当你抛出一个球时，它何时何地着陆取决于它被抛出的速度以及它距离地面的距离。类似地，将一个连接到弹簧上的球掉落，它的掉落（和反弹）方式与将一个连接到绳子上的球掉落的方式不同。

如果你正在使用 Material 小部件，你可能会查看 pub.dev 上提供的动画包。此包包含针对以下常用模式的预制动画：Container 转换、共享轴过渡、淡入过渡和淡出过渡。

大多数 UX 或运动设计师发现，在设计 UI 时会重复使用某些动画模式。本部分列出了一些常用的动画模式，并告诉你可以在哪里了解更多信息。

此模式涉及对列表或网格中的元素添加或移除动画。

AnimatedList 示例
此演示来自示例应用目录，展示了如何对列表添加元素或移除选定元素的动画。当用户使用加号 (+) 和减号 (-) 按钮修改列表时，内部 Dart 列表会同步。

在此模式中，用户从页面中选择一个元素（通常是图像），然后 UI 将所选元素以动画形式移动到包含更多详细信息的新页面。在 Flutter 中，你可以使用 Hero 小部件轻松地在路由（页面）之间实现共享元素过渡。

Hero 动画如何创建两种风格的 Hero 动画
- Hero 在从一个页面飞到另一个页面时会改变位置和大小。
- Hero 的边界在从一个页面飞到另一个页面时会改变形状，从圆形变为方形。
另请参阅 Hero、Navigator 和 PageRoute 类的 API 文档。

分解为较小动作的动画，其中一些动作被延迟。较小的动画可能是顺序的，也可能部分或完全重叠。

通过以下链接了解有关 Flutter 动画的更多信息