动画效果介绍

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.

选择一种实现方式

Choosing an approach

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

There are different approaches you can take when creating animations in Flutter. Which approach is right for you? To help you decide, check out the video, How to choose which Flutter Animation Widget is right for you? (Also published as a companion article.)

(若想要深入了解它的决策流程,请观看在 Flutter Europe 发布的 在 Flutter 中使用动画的正确选择)视频。

(To dive deeper into the decision process, watch the Animations in Flutter done right video, presented at Flutter Europe.)

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

As shown in the video, the following decision tree helps you decide what approach to use when implementing a Flutter animation:

The animation decision tree

如果内置的隐式动画(最简单的动画)已经能够满足你的需求,请观看[隐式动画基础][Animation basics with implicit animations]。(同时也发布了一篇配套文章。)

If a pre-packaged implicit animation (the easiest animation to implement) suits your needs, watch Animation basics with implicit animations. (Also published as a companion article.)

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

To create a custom implicit animation, watch Creating your own custom implicit animations with TweenAnimationBuilder. (Also published as a companion article.)

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

To create an explicit animation (where you control the animation, rather than letting the framework control it), perhaps you can use one of the built-in explicit animations classes. For more information, watch Making your first directional animations with built-in explicit animations. (Also published as a companion article.)

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

If you need to build an explicit animation from scratch, watch Creating custom explicit animations with AnimatedBuilder and AnimatedWidget. (Also published as a companion article.)

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

For a deeper understanding of just how animations work in Flutter, watch Animation deep dive. (Also published as a companion article.)

Codelabs, 教程和文章

Codelabs, tutorials, and articles

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

The following resources are a good place to start learning the Flutter animation framework. Each of these documents shows how to write animation code.

Animation types

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

Generally, animations are either tween- or physics-based. The following sections explain what these terms mean, and point you to resources where you can learn more.

补间动画

Tween animation

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

Short for in-betweening. In a tween animation, the beginning and ending points are defined, as well as a timeline, and a curve that defines the timing and speed of the transition. The framework calculates how to transition from the beginning point to the end point.

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

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

基于物理基础的动画

Physics-based animation

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

In physics-based animation, motion is modeled to resemble real-world behavior. When you toss a ball, for example, where and when it lands depends on how fast it was tossed and how far it was from the ground. Similarly, dropping a ball attached to a spring falls (and bounces) differently than dropping a ball attached to a string.

预置动画

Pre-canned animations

如果你在使用 Material widgets,你也许想要看看 pub.dev 上的动画 package。这个 package 包含了以下内置常用模式: Container变换,共享轴变换,

If you are using Material widgets, you might check out the animations package available on pub.dev. This package contains pre-built animations for the following commonly used patterns: Container transforms, shared axis transitions, fade through transitions, and fade transitions.

常见动画模式

Common animation patterns

大多数 UX 或动效设计师在设计 UI 时都会寻找主要动画模式。本章的列表将介绍一些常见的动画模式,并向你介绍更多学习它们的地方。

Most UX or motion designers find that certain animation patterns are used repeatedly when designing a UI. This section lists some of the commonly used animation patterns, and tells you where to learn more.

列表或网格动画

Animated list or grid

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

This pattern involves animating the addition or removal of elements from a list or grid.

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

    AnimatedList example
    This demo, from the Sample app catalog, shows how to animate adding an element to a list, or removing a selected element. The internal Dart list is synced as the user modifies the list using the plus (+) and minus (-) buttons.

共享元素转换

Shared element transition

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

In this pattern, the user selects an element—often an image—from the page, and the UI animates the selected element to a new page with more detail. In Flutter, you can easily implement shared element transitions between routes (pages) using the Hero widget.

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

    Hero animations How to create two styles of Hero animations:

    • 当改变位置和大小时,Hero 从一页飞至另一页。

      The hero flies from one page to another while changing position and size.

    • Hero 的边界改变形状由圆变方,同时从一页飞至另一页。

      The hero’s boundary changes shape, from a circle to a square, as its flies from one page to another.

  • Flutter Gallery
    您可以自己自己创建 Gallery 应用程序,或者到 Play 商店中下载。 Shrine 演示中有关于 Hero 动画的示例。

    Flutter Gallery
    You can build the Gallery app yourself, or download it from the Play Store. The Shrine demo includes an example of a hero animation.

  • 另请参阅 API 文档 HeroNavigatorPageRoute 类。

    Also see the API documentation for the Hero, Navigator, and PageRoute classes.

交织动画

Staggered animation

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

Animations that are broken into smaller motions, where some of the motion is delayed. The smaller animations might be sequential, or might partially or completely overlap.

其他资源

Other resources

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

Learn more about Flutter animations at the following links: