动画效果介绍
精心设计的动画会使 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 动画的正确方式:
如果内置的隐式动画(最简单的动画)已经能够满足你的需求,请观看 隐式动画基础。(同时也发布了一篇 配套文章。)
要创建一个自定义的隐式动画,请观看 使用 TweenAnimationBuilder 创建独特的隐式动画。(同时也发布了一篇 配套文章。)
使用 TweenAnimationBuilder 创建自定义隐式动画
要创建显式动画(手动控制,而不是让框架控制),你可以使用内置的其中一个显式动画类来实现。更多有关信息,请观看 使用内置显式动画。(同时也发布了一篇 配套文章。)
如果你需要从头开始构建显式动画,请观看 通过 AnimatedBuilder 和 AnimatedWidget 创建一个自定义动画。(同时也发布了一篇配套文章。)
想要更深入的理解动画在 Flutter 中的工作方式,请观看 深入理解动画。(同时也发布了一篇 配套文章。)
Codelabs, 教程和文章
#通过下面的资源可以很好的学习 Flutter 动画框架。这些文档循序渐进地讲解如何编写动画代码。
-
隐式动画 codelab
涵盖了如何使用隐式动画的分步说明及交互示例。 -
动画教程
阐释了 Flutter 动画包中的基本类(控制器,动画,曲线,监听器,构建器),这些可以帮助你使用不同的动画 APIs 完成补间动画。 -
使用 Flutter 从零到一, 第一部分 和 第二部分
Medium 文章中有介绍如何使用补间动画创建图表动画。 -
撰写你的第一个 Flutter Web 应用
Codelab 演示如何构建一个根据用户填写的内容以动画展示进度的表单。
Animation types
#动画分为两类:补间动画和基于物理动画。下面将解释这些术语的含义,并帮助你找到更多相关资源。在一些情况下,我们现有的最佳文档是 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 的边界改变形状由圆变方,同时从一页飞至另一页。
-
交织动画
#动画被分解成较小的动作,其中一些动作被延迟。这些小动画可以是连续的,也可以部分或完全重叠。
其他资源
#以下链接可以了解更多 Flutter 动画:
-
Flutter 实用教程 (Cookbook) 中的 动画教程
-
Flutter 视频频道中 动画相关的视频
-
动画概览
动画库中主要类简介,以及 Flutter 动画结构。 -
动画及动作 Widgets
Flutter APIs 提供的动画 widgets 目录。 -
Flutter API 文档 中的 动画库
Flutter 的动画 API。此链接将带你进入动画库的概述页。
除非另有说明,本文档之所提及适用于 Flutter 的最新稳定版本,本页面最后更新时间: 2024-10-09。 查看文档源码 或者 为本页面内容提出建议。