动画效果介绍

精心设计的动画会使 UI 更生动，它有助于提升应用程序更精巧的外观和感觉，从而改善用户体验。 Flutter 让各种动画效果的实现变得容易。在许多 widget 特别是 Material widgets 中，它们都自带其设计规范中定义的标准动画效果，当然，你也可以定制这些效果。

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

How to choose which Flutter animation widget is right for your use case

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

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

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

Flutter 隐式动画动画基础知识

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

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

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

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

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

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

• 隐式动画 codelab
  涵盖了如何使用隐式动画的分步说明及交互示例。

• 动画教程
  阐释了 Flutter 动画包中的基本类（控制器，动画，曲线，监听器，构建器），这些可以帮助你使用不同的动画 APIs 完成补间动画。

• 使用 Flutter 从零到一, 第一部分 和 第二部分
  Medium 文章中有介绍如何使用补间动画创建图表动画。

• 撰写你的第一个 Flutter Web 应用
  Codelab 演示如何构建一个根据用户填写的内容以动画展示进度的表单。

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

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

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

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

• 使用物理模拟动画效果
  在 Flutter cookbook 中的动画教程。

• 请参考 API 文档 AnimationController.animateWith 和 SpringSimulation。

如果你在使用 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 的边界改变形状由圆变方，同时从一页飞至另一页。

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

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

• 交织动画

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

• 示例应用目录 中的 动画示例

• Flutter 实用教程 (Cookbook) 中的 动画教程

• Flutter 视频频道中 动画相关的视频

• 动画概览
  动画库中主要类简介，以及 Flutter 动画结构。

• 动画及动作 Widgets
  Flutter APIs 提供的动画 widgets 目录。

• Flutter API 文档 中的 动画库
  Flutter 的动画 API。此链接将带你进入动画库的概述页。

除非另有说明，本文档之所提及适用于 Flutter 的最新稳定版本，本页面最后更新时间: 2024-08-05。 查看文档源码 或者 为本页面内容提出建议。