- Choosing an approach
- Codelabs, tutorials, and articles
- Codelabs, 教程和文章
- Animation types
- Pre-canned animations
- Common animation patterns
- Other resources
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
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:
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.)
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.)
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.
Implicit animations codelab
Covers how to use implicit animations using step-by-step instructions and interactive examples.
阐释了 Flutter 动画包中的基本类（控制器，动画，曲线，监听器，构建器），这些可以帮助您使用不同的动画 APIs 完成补间动画。
Explains the fundamental classes in the Flutter animation package (controllers, Animatable, curves, listeners, builders), as it guides you through a progression of tween animations using different aspects of the animation APIs.
Building Beautiful UIs with Flutter
Codelab demonstrating how to build a simple chat app. Step 7 (Animate your app) shows how to animate the new message—sliding it from the input area up to the message list.
动画分为两类：补间动画和基于物理动画。下面将解释这些术语的含义，并帮助您找到更多相关资源。在一些情况下，我们现有的最佳文档是 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.
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 应用里实现动画效果]animations tutorial 并不是特别针对补间动画的，但是其示例中使用了补间动画。|
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.
在 Flutter cookbook 中的动画教程。
Animate a widget using a physics simulation
A recipe in the animations section of the Flutter cookbook.
Under Material Components, the
Gridexample 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.
请参考 API 文档 [AnimationController
.animateWith][AnimationController.animateWith] 和 [SpringSimulation]。
如果你在使用 Material widgets，你也许想要看看 pub.dev 上的动画 package。这个 package 包含了以下内置常用模式：
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.
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)
Hero animations 如何创建两种风格的 Hero 动画：
Hero animations How to create two styles of Hero animations:
The hero flies from one page to another while changing position and size.
The hero’s boundary changes shape, from a circle to a square, as its flies from one page to another.
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.
以下链接可以了解更多 Flutter 动画：
Learn more about Flutter animations at the following links:
Animation recipes from the Flutter cookbook.
Animation videos from the Flutter YouTube channel.
动画库中主要类简介，以及 Flutter 动画结构。
A look at some of the major classes in the animations library, and Flutter’s animation architecture.
Flutter APIs 提供的动画 widgets 目录。
Animation and motion widgets
A catalog of some of the animation widgets provided in the Flutter APIs.