Flutter 中文文档：动画效果介绍

以轻松实现各种动画类型。许多 widgets 尤其是 Material widgets，在其设计规范定义中都自带标准动画效果，不过也支持定制效果。

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

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

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

  第一部分：https://medium.com/flutter/zero-to-one-with-flutter-43b13fd7b354

  第二部分：https://medium.com/flutter/zero-to-one-with-flutter-part-two-5aa2f06655cb

1. 动画类型

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

1.1 补间动画

上文列出的文档，比如  并不是特别针对补间动画的，但是其示例中使用了补间动画。

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

1.2 基于物理基础的动画

Flutter Gallery：

https://github.com/flutter/flutter/tree/master/examples/flutter_gallery

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

Grid：https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/grid_list_demo.dart

请参考 API 文档 

AnimationController.animateWith：

https://api.flutter-io.cn/flutter/animation/AnimationController/animateWith.html

SpringSimulation：

https://api.flutter-io.cn/flutter/physics/SpringSimulation-class.html

2. 常见动画模式

多数 UX 或动画设计人员会发现在设计 UI 时，经常重复使用某些动画模式。本章列举了一些常用的动画模式，并提供更多学习路径。

2.1 列表或网格动画

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

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

2.2 共享元素转换

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

• Hero Animations 如何创建两种风格的 Hero 动画：

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

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

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

2.3 交织动画

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

交织动画

链接：https://flutter.cn/docs/development/ui/animations/staggered-animations

3. 其他资源

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

动画及动作 widgets

链接：https://flutter.cn/docs/development/ui/widgets/animationFlutter APIs 提供的动画 widgets 目录。