动画效果介绍

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

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 动画框架。这些文档循序渐进地讲解如何编写动画代码。

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

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

We also have some videos that discuss aspects of Flutter animation.

AnimatedContainer

Opacity, including the implicit AnimatedOpacity widget

FadeInImage

Hero

Transform

AnimatedBuilder

动画类型

Animation types

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

Animations fall into one of two categories: tween- or physics-based. The following sections explain what these terms mean, and point you to resources where you can learn more. In some cases, the best documentation we currently have is example code in the Flutter gallery.

补间动画

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.

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

上文列出的文档,比如 [教程 在 Flutter 应用里实现动画效果](/docs/development/ui/animations/tutorial) 并不是特别针对补间动画的,但是其示例中使用了补间动画。

基于物理基础的动画

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.

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

Under Material Components, the Grid example demonstrates a fling animation. Select one of the images from the grid and zoom in. You can pan the image with flinging or dragging gestures.

常见动画模式

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 you can 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 文档 Hero, Navigator, PageRoute

    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:


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

If there is specific animation documentation you’d like to see, file an issue.