一文可以让你在Flutter动画上讲两句

本篇文章翻译自Introduction to animations，主要是对Flutter的动画有一个大概的了解。

好的动画可以让 UI 更直观，让应用看起来更流畅更精致，更能提高用户体验。Flutter 的动画支持，使它很容易实现各种动画类型。在 Flutter 中可以很容易的实现各种类型的动画。许多 Widget，尤其是 Material widgets ，都自带了设计规范定义的标准的动画效果，当然了开发者也可以自定义动画效果。

选择一种实现方式

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 中，开发者有很多种方式来创建动画。那种方式适合开发者的场景呢？为了帮助开发者做出选择，发布了这个视频👉如何正确的选择动画实现方式? 和 配套文章，这篇文章文章后面我也会翻译下来。

上面的动画和文章，描述了一个动画实现方式的选择过程：

Flutter 提供的隐式动画是否满足你的需求，可以看这里👉Animation basics with implicit animations，隐式动画是最简单的动画实现方式。

自定义隐示动画的创建可以看这里👉 Creating your own custom implicit animations with TweenAnimationBuilder。

显示动画的创建可以看这里可以看这里👉 [Making your first directional animations with built-in explicit animations]，显示动画是自己控制动画，而不是使用框架封装的。

如果你想从头创建一个显示动画，可以看这里👉 Creating custom explicit animations with AnimatedBuilder and AnimatedWidget。

为了更加深入的了解动画是怎么运行的，可以看这里👉 Animation deep dive。

Codelabs, tutorials, and articles

下面学习 Flutter 框架动画的一些非常不错的资料，每一个文档都告诉我们怎么去开发动画。

• Implicit animations codelab
  介绍了怎么一步一步的使用隐示动画，并提供了一些直观的小例子。

• Animations tutorial
  解释了支撑 Flutter 动画框架的最基础的类，比如 controllers，Animatable, curves, listeners, builders等等。解释了关于动画的一些API的使用，并且还告诉开发者如何构建开发者自定义的显示动画。

• Zero to One with Flutter, part 1 和 part 2
  通过一个动画的图标案例解释了怎么开发补间动画

• Write your first Flutter app on the web
  代码案例演示了如何使用动画来显示用户表单填写的进度

• Building Beautiful UIs with Flutter
  代码案例演示了怎么去构建一个简单的聊天 App，Step 7 (Animate your app) 为开发者演示了一个聊天信息的动画：新消息-将其从输入区域滑动到消息列表。

动画类型

一般来说，动画有两种类型：补间动画和物理动画。这一节介绍概念的含义以及每种类型的学习资源。

补间动画

简单来说就是过渡。在一个补间动画里，开始、结束、时间线、动画曲线都是定义好的。框架会计算如何从起点过渡到终点。

物理仿真动画

基于物理的仿真动画，运动的轨迹模拟真实世界的行为。比如当你抛一个小球的时候，什么时间落地，落在什么地方，都取决与抛球的速度和离地面的距离。还有，把球绑在弹簧上和绑在身子上扔下去的效果也是不同的。

• Animate a widget using a physics simulation

• Flutter Gallery
  在 Material Components 目录下的 Grid。就展示了一个 fling 动画。 

•  AnimationController.animateWith 和 SpringSimulation

Flutter提供的动画

如果使用 Material 风格的样式，开发者可以检查👉动画包，这个包里面提供了很多常用的动画效果： Container 变换，坐标轴变换，淡入淡出，位移等效果。

常用的动画效果

在设计 UI 时，大多数 UX 和动作设计师会反复使用某些某些动画效果。这一节就列出了一些常用的动画效果，并告诉你在哪里可以继续学习。

网格和列表动画

最常见的就是元素的增加和删除动画。

• AnimatedList example Sample app catalog中的案例，展示了怎么以动画的形式添加和移除元素。

共享元素动画

用户选择一个元素通常是一张图片，会以动画的形式将选中的元素移到新的详情页。在 Flutter 中，可以使用 Hero widget实现这种跨 Route 的动画效果。

• Hero animations 如何创建两种风格的 Hero 动画:

  • 从一页滑到另一页的同时改变位置和尺寸
  • 从一页滑到另一页的同时改变形状

• Flutter Gallery
  Flutter 效果演示 App

• 可以看Hero, Navigator, 和 PageRoute 的类文档。

交错动画

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

• Staggered Animations

总结

上面官方给出的动画文档介绍，这一篇以介绍为主，后面会陆续把细节暴漏出来。✌️