Flutter动画介绍

设计优良的动画使得UI更加直观，有助于使app更加精美和流畅，提升用户体验。Flutter的动画支持使得它更加容易地实现丰富的动画类型。许多widget，特别是在设计规范中就定义了标准的动效的 Material widgets，都可以自定义动画效果。

以下两处是开始学习Flutter动画框架很好的资源，每个文档都一步一步的指导您如何写动画。

• Animations toturial
  通过使用动画api的不同方面引导您完成补间动画的这一过程，来解释Flutter 动画包中的基础类（controllers，Animatable，curves，listeners，builders）。
• Flutter 0到1，part1, part2。
  如何使用补间动画创建动画的图表。
• Building Beautiful UIs with flutter
  Codelab 演示如何构建一个简单的聊天app。 Step 7 (Animate your app)演示了如何为新消息添加一个动画——从输入区域向上滑入到消息列表中。

动画Animation的类型

Animation无非就两种类型，基于补间的或基于物理的。下面的章节解释了这些术语，并向您介绍可以进一步了解的资源。在某些情况下，我们目前最好的文档是Flutter gallery中的示例代码。

补间动画

Tween是in-betweening的简写形式，即‘补间’。在一个补间动画中，定义了起点和终点，时间轴，以及时间和速度的变化曲线。框架计算如何从起点变化到终点。
上面列出的文档，例如animation tutorial并不是关于补间的，但是在它们的例子中使用补间。（额。。。）

物理动画

在物理动画中，采用运动建模以模拟现实世界的行为。例如，当你掷一个球时，球着陆的时间和地点取决于它被抛出时的起始速度，它在球场的位置。相似地，一个球挂在弹簧上，和一个球挂在绳子上，做落体运动，它们的下降情况是不一样的。

• Flutter Gallery
  在Material Components下，Grid例子示范了一个fling（惯性，扔）动画。从grid中选择一张图片并放大。你可以使用fling或者拖拽手势来平移图片。
• 也可参阅AnimationController.animateWith 和 SpringSimulation 文档。

常见动画模式

多数UX或者动画设计师设计UI时，总是寻找可以反复使用的动画模式。这一节列出一些通常使用的动画模式，并告诉你哪里可以了解更多。

动画list或grid

该模式包括向list或grid中添加和移除元素。

• AnimatedList example
  Sample App Catalog这个例子展示了在list中添加或者移除一项时，如何做动画。当用户使用（+） 或（-）按钮来修改这个列表时，内部的Dart list会被同步。

过渡共享元素（转场动画）

在这种模式中，用户从一个页面中选中一个元素，通常是一个图片，然后这个UI元素动画过渡到一个新的详情页。在Flutter中，你可以在路由（routes）间使用Hero widget以轻易的实现共享元素的过渡动画，在这种场景下，做动画的widget被称作hero。

• Hero Animations 如何创建两种风格的Hero 动画：
  – hero从一个页面飞到另外一个页面，并改变位置和大小。
  – hero从一个页面飞到另外一个页面，改变hero的形状，例如从圆形变换到方形。
• Flutter Gallery
  你可以自己构建Gallery app，或者从Play Store下载下来。Shrine demo 包括了Hero 动画的例子。
• 可以参看Hero，Navigator，和PageRoute 类的API文档。

交错（staggered）动画

一个动画被拆分成若干个小的动作，一些动作会被延迟。这些更小的动画也许是连续的，或者是局部的，或者完全就是交错的。

• Staggered Animations

其他资源

了解更多关于Flutter 动画的资源：

• Animations: Technical Overview
  关于动画库中的主要类，以及Flutter的动画架构的速览。
• Animation and Motion Widgets
  Flutter API中提供的一些动画widgets的目录。