Contents

动画效果介绍

Contents

Well-designed animations make a UI feel more intuitive, contribute to the slick look and feel of a polished app, and improve the user experience. Flutter’s animation support makes it easy to implement a variety of animation types. Many widgets, especially Material widgets, come with the standard motion effects defined in their design spec, but it’s also possible to customize these effects.

选择一种实现方式

在 Flutter 中创建动画可以有多种不同实现方式。那么，究竟哪种才是最适合你的呢？为了帮助你更好的理解它，你可以观看下面的视频， 如何在 Flutter 中选择合适的动画 Widget （同时也发布了一篇 配套文章。）

（若想要深入了解它的决策流程，请观看在 Flutter Europe 社区账号发布的 在 Flutter 中使用动画的正确选择）视频。

正如视频中说的那样，下面的决策树将帮助你挑选实现 Flutter 动画的正确方式：

The animation decision tree

如果内置的隐式动画（最简单的动画）已经能够满足你的需求，请观看 隐式动画基础。（同时也发布了一篇 配套文章。）

要创建一个自定义的隐式动画，请观看 使用 TweenAnimationBuilder 创建独特的隐式动画。（同时也发布了一篇 配套文章。）

要创建显式动画（手动控制，而不是让框架控制），你可以使用内置的其中一个显式动画类来实现。更多有关信息，请观看 使用内置显式动画。（同时也发布了一篇 配套文章。）

如果你需要从头开始构建显式动画，请观看 通过 AnimatedBuilder 和 AnimatedWidget 创建一个自定义动画。（同时也发布了一篇配套文章。）

想要更深入的理解动画在 Flutter 中的工作方式，请观看 深入理解动画。（同时也发布了一篇 配套文章。）

Codelabs, 教程和文章

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

Animation types

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

补间动画

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

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

基于物理基础的动画

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

预置动画

如果你在使用 Material widgets，你也许想要看看 pub.dev 上的 animations package。这个 package 包含了以下内置常用模式： Container 变换、共享轴变化、渐变穿透和渐变变换。

常见动画模式

大多数 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 动画：