跳至主要内容
内容

动画简介

内容

精心设计的动画使 UI 感觉更直观，有助于打造抛光应用的流畅外观和感觉，并改善用户体验。Flutter 的动画支持使您可以轻松实现各种动画类型。许多小部件，尤其是 Material 小部件，在其设计规范中定义了标准的运动效果，但也可以自定义这些效果。

选择一种方法

#

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


如何选择适合您的用例的 Flutter 动画小部件

（要更深入地了解决策过程，请观看在 Flutter Europe 上展示的 正确完成 Flutter 动画 视频。）

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

The animation decision tree

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


Flutter 隐式动画基础

要创建自定义隐式动画，请观看 使用 TweenAnimationBuilder 创建您自己的自定义隐式动画。（也作为 配套文章 发布）。


使用 TweenAnimationBuilder 创建自定义隐式动画

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


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


要更深入地了解 Flutter 中动画的工作原理，请观看 动画深入探讨。（也作为 配套文章 发布）。


Codelab、教程和文章

#

以下资源是开始学习 Flutter 动画框架的好地方。这些文档中的每一个都展示了如何编写动画代码。

动画类型

#

通常，动画要么基于补间，要么基于物理。以下部分解释了这些术语的含义，并为您指明了可以了解更多信息的资源。

补间动画

#

“补间”的缩写。在补间动画中，定义了起点和终点，以及时间线，以及定义过渡时间和速度的曲线。框架计算如何从起点过渡到终点。

上面列出的文档，例如 动画教程，并非专门关于补间的，但它们在其示例中使用了补间。

基于物理的动画

#

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

预制动画

#

如果您使用的是 Material 小部件，您可能需要查看 pub.dev 上提供的 animations 包。此包包含以下常用模式的预构建动画：Container 变换、共享轴过渡、淡入淡出过渡和淡出过渡。

常见的动画模式

#

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

动画列表或网格

#

此模式涉及为列表或网格中元素的添加或删除设置动画。

  • AnimatedList 示例
    此演示来自 示例应用程序目录，展示了如何为向列表中添加元素或删除所选元素设置动画。当用户使用加号 (+) 和减号 (-) 按钮修改列表时，内部 Dart 列表会同步。

共享元素过渡

#

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

  • Hero 动画 如何创建两种风格的 Hero 动画

    • 英雄在更改位置和大小的同时从一个页面飞到另一个页面。
    • 英雄的边界在形状上发生变化，从圆形变为方形，因为它从一个页面飞到另一个页面。

  • 另请参阅 Hero、Navigator 和 PageRoute 类的 API 文档。

交错动画

#

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

其他资源

#

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

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-07-06。 查看源代码 或 报告问题。