Flutter的趋势简直是如日中天，他的魅力绝不仅仅在于是一个跨平台的App开发框架，就如官网首页所说的Design beautiful apps，他可以快速开发有设计感的App，而这些得益于强大设计生态圈的支持，这其中就包括2dimensions。

这个教程不是一篇Flutter动画教学，所以可能涉及到的代码不是很多。

开始之前我们先来谈谈动画吧，在这里我们姑且把动画分成两类：
第一类是交互动画。比如说我用手指把一个卡片拖来拖去，交互动画的演示是依赖于我们的操作的。
第二类是基本动画。比如所一个button，我点一下他会变成另外一个形状，基本动画的演示是不依赖于我们的操作的。

以往开发App的时候，无论交互动画还是基本动画，基本上都是由代码实现。这样虽然可以实现，但是开发成本较高，就拿Android来说吧，完成一个稍微复杂的动画基本上就要一天左右，这其中包括：动画的分解，动画Canvas绘画的时间，动画坐标计算的时间，还有最让人头疼的编译时间。而今天的主题就是，如何快速从设计到动画到导入其到项目当中。

那么就开始吧，这里要使用到2dimensions的Flare了。那么Flare是个什么东西呢？官网有这么一段介绍：

Flare is a powerful design and animation tool, which allows designers and developers to easily add high-quality animation to their apps and games.

大概的意思是说，Flare是一个强大的设计和动画制作工具，它可以让设计师和程序员很容易的吧高质量动画放到App或者游戏当中。

看这个意思，也很大程度上降低了设计师和程序员的沟通成本。
好的，废话不多说了。我们先看一下成品，然后开始工工。

动画

压缩之后的gif掉帧严重啊，请下载文章结尾之后的demo观看吧。

Flare的地址在https://www.2dimensions.com，第一次使用，你需要注册一个账号，或者使用Google或者Facebook账号直接登录。然后点击Your Files新建一个Flare项目：

创建文件

Flare公开项目是免费的，私有项目是收费的，显然2d鼓励大家多分享自己的动画，这也让2d的优秀动画非常的多。

制作动画

现在来到的是Flare的工作空间，中间最大的灰色区域就动画设计区域，新建我们按U新建一个矩形，在设计区域画出你的矩形，并把右侧的宽和高设置为720和90，并把圆角设置为15，取消描边。在属性区域的上面有对其选项，我们将它居中，操作方法见下图。

设置属性

在属性区域我们给他一个漂亮一点的颜色，我这里使用#1BADDB。在动画设计区域的左侧，我们把选项卡切换到ANIMATE，在动画设计区域的下面你可以看到时间轴了，如果你之前有使用过Flash或者AE这样的视频编辑软件，对这个应该相当熟悉了，没有了解过没有关系，按照操作都可以做出咱们的动画。

时间轴

现在我们稍微聊一下动画或者视频制作的基本原理吧。一个动画可正常演示，需要两个因素，第一个是内容，第二个是时间，那么一个动画就可以理解为在一段时间内表现了什么内容。时间和内容都有基本单位，通常来说，时间用秒来表示，而内容使用帧来表示。如果说一个电视节目是25帧的，那么就代表这个视频在一秒钟的时间中，画面切换了25次。

我们在进行动画制作的时候，编辑的基本单位就是帧了。举个例子：画面中有个矩形，时间轴上他在0s时候他的长高是100*100，在1s的时候他变成了200*200。那么在1s-2s这段时间内，他就是一个从100*100到200*200逐渐变大的过程，那么你应该知道他是什么动画了吧。

而针对于长高这个属性在时间轴上的这个点，就叫做关键帧，说白了就是一个属性开始变化和结束变化的点。

在Flare右侧的属性区域中，你可以看到很多小的菱形，那个就是为这个属性添加关键帧的，那么现在你思考一下，我想让Height这个属性，在1s到2s时候，从0变化到200，那么这个关键帧应该怎么添加呢？这时候，你可以自己先琢磨一下。

好的，接着上面继续为您说。
现在我们分解一下动画，我们可以发现，这个动画很简单，仅仅是由Width和Corner Radius组成的。

时间轴拖到0

• width 设置为720，点击菱形
• Corner Radius设置为15，点击菱形

时间轴拖到20

• width 设置为90，点击菱形
• Corner Radius设置为45，点击菱形

现在按下空格键，是不是看到动画了呢，当然这个动画过于生硬，我们再添加几个属性进去

时间轴拖到0

• width 设置为720，点击菱形
• Corner Radius设置为15，点击菱形
• Key Interpolation设置为Cubic

时间轴拖到14

• width 设置为90，点击菱形
• Corner Radius设置为45，点击菱形
• Key Interpolation设置为Cubic

时间轴拖到17

• width 设置为120，点击菱形
• Corner Radius设置为45，点击菱形
• Key Interpolation设置为Cubic

时间轴拖到20

• width 设置为90，点击菱形
• Corner Radius设置为45，点击菱形
• Key Interpolation设置为Cubic

现在看起来是不是好一些了呢。

等等，还差一点，注意看我们的时间轴左侧有一个Untitled，这个也很重要。这个是什么呢？他代表一个动画状态，在这个工作区间里面，我们可以添加多个动画状态，而这个Untitled就代表动画的名字，现在我们把它命名为AnimButton。然后我们在新建一个动画的状态，命名为Idle，代表动画初始状态。我们要执行的动画就是从Idle状态转到AnimButton状态。如下图：

动画状态

然后我们导出这个动画，记得勾选Duration from Last Keyframe得到一个flr文件：

导出flr

导入到Flutter

现在我们新建一个flutter项目，并导如这个flr文件到assets中，现在的问题就是怎么使用这个动画文件了，他需要一个依赖库来加载。https://pub.dartlang.org/packages/flare_flutter

1. 在pubspec.yaml加入

dependencies:
  flare_flutter: ^1.4.0

2. 然后flutter packages get
3. 在pubspec.yaml的asset中声明我们刚才制作的的文件

flutter:
  assets:
    - assets/anim/buttonAnim.flr

4. 引入动画，先看代码

class _MyHomePageState extends State<MyHomePage> {

  //  初始动画状态
  String _animation = "Idle";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("动画"),
      ),
      body: Center(
        child: new FlareActor(
          "assets/anim/buttonAnim.flr",
          alignment: Alignment.center,
          fit: BoxFit.contain,
          animation: _animation,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            //  执行到AnimButton状态
            _animation =  "AnimButton";
          });
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

上面代码中，我们使用FlareActor来加在我们的动画：

FlareActor(
  "assets/anim/buttonAnim.flr",
  alignment: Alignment.center,
  fit: BoxFit.contain,
  animation: _animation,
),

其中animation就是我们刚才声明的状态了，这里的动画有两个状态，分别为Idle和AnimButton，对应我们上面制作动画时候的两个时间轴，我们要从Idle状态执行到AnimButton状态。

Demo地址https://github.com/leconio/flutter_button_animation