Flutter动画之Flare的制做与使用

  12月4日的Flutter Live中，Flare动画宣布了支持Flutter！可是这么久过去了，并无相关的完的善中文教程出现，因此斗胆来写一下。主要分红两个部分来讲说Flare：一是简单讲下怎么在2dimensions上制做Flare动画，二是怎么在Flutter中使用Flare动画。划重点！！！：若是你是程序员，而且对设计没兴趣，那么直接目录跳到第二部分就OK了。
  先说下什么是Flare呢？其实就是一个在线的动画设计网站，能够为App、游戏和网页制做矢量动画模型，网址是： www.2dimensions.com 。其实After Effects也有相关的实践，像是咱们熟知的Lottie和Bodymovin，一套设计，就能够在iOS和Android双端实现复杂又好看的动画效果。

Flare的制做

新建Flare动画

  首先打开2dimensions网站：www.2dimensions.com，自行注册帐号。注册完毕后，将鼠标移动到右上角的用户头像左边Your Files菜单，就能够看到制做动画的入口啦：

  咱们能够新建一个Flare文件，或是一个Nima文件，二者均可以在Flutter中使用。简单说下区别：

• Flare：Insanely Fast Vector Animation，为App和Web构建实时、快速的动画，一样也能够用于游戏设计。
• Nima：Powerful raster graphics animation tool，主要是为游戏引擎和应用构建2D动画。

工做面板介绍

  简而言之，Flare更偏向于App和Web使用，Nima更偏向于游戏引擎使用。咱们以建立Flare为例，初始的空白工做区长这个样子：

  左上角有两个tab，分别是SETUP和ANIMATE：

• SETUP模式是用来绘制、导入矢量元素的；
• ANIMATE模式是用来将矢量元素动起来的。

  Hierarchy用树状图的形式展现了全部控件的等级关系，通常顶级结点是一个artboard，能够定义scene的尺寸、背景颜色等属性。你也能够有多个artboard，可是一个flare文件至少须要包含一个artboard。全部类型的控件均可以拥有本身的子控件，子控件会继承父控件的全部变换。
  SETUP模式下会出现“+”号菜单，用来添加矢量元素，能够看到有预置的画笔、形状等等，咱们先随便新建一个形状来做为讲解例子，这里我就导入一个五角星吧：

  按住鼠标右键（或者按住空格拖动鼠标）能够拖动画布，滚轮放大/缩小，上下左右键精确调整位置，Shift+上下左右键能够大幅调整位置。选中咱们的Star形状，右侧会出现属性菜单栏，能够修改位置、大小、颜色、线条等等属性：

  接下来咱们切换到ANIMATE模式来添加动画，底下会多出一行动画控制面板：

  会生成一个名为“Untitled”的默认动画，双击能够更名，由于后边在Flutter代码中可能会用到这个动画名，因此尽可能起个好名字，省得给本身找麻烦。
  AUTOKEY按钮默认选中就能够了，后边三个蓝色按钮分别表示：是否展现选中项、预览是否循环播放、是否展现动画工做区间：

  动画默认是10秒钟，拖动下图的两条蓝线能够调整区间：

属性动画

  （属性动画这个名字是我本身起的）属性包括了缩放、旋转、位移、透明度、颜色等等，只要右侧属性面板中带小菱形标志，我都概括到了这一类型中。
  接下来，咱们试着给五角星添加一个放大的动画：首先选中五角星，而后在下边的时间轴上选择一个动画开始时间点（以2s为例），再点击右边属性面板scale属性x、y右边的透明小菱形（点击后变蓝色），底下面板就会多处一个scale动画了：

  将蓝色竖线拖动到动画结束点（以4s为例）：

  你会发现，本来蓝色的小菱形右变成了空心的，此时点击小菱形，会变蓝，同时生成一条从2s指向4s处的横向蓝线（你彻底可使用其余办法生成，总之最后有这条指向性的蓝色线就行）：

  这条横线就表明了一段同属性动画的动画区间，你能够在这条线上加不少个点，选中每一个点均可以修改当前时间点的动画属性值（加点的方法和前面同样，移动竖着的蓝色控制线，而后点击透明的小菱形变为蓝色就行）。例以下边这个透明度的变化值，你能够在任意时间点上添加蓝色小菱形，而后设置当前透明度值：

  咱们回到4s处，双击蓝色小菱形，将scale值修改成1.5，这样，一个从2s——>4s，scale从1.0——>1.5的缩放动画就完成啦：

  右下角有一个差值器面板，Flare预置了三种差值器：Hold、Linear和Cubic：

  用这种方法，咱们能够为动画加上各类各样的属性，缩放、旋转、位移、透明度、颜色等等，只要右侧属性面板中有的属性（就是右边带小菱形标志的属性）均可以添加。

Node和Solo控件

  Node顾名思义就是结点，其实就是控制点，调整node的值能够控制某部分画面的动画，它拥有基础的变换属性（移动、旋转和缩放），若是使用node做为容易，那么能够为控件添加额外的变换（好比旋转一张图片、一组图片、或者自定义旋转中心）。接下来咱们都以Google Live上的玩手机小人动画为例来说解：

  结点是一个像全屏同样的四角图标，上图中的 eye_close_right、 eye_right、 eye_close_let、 eye_left等等都是结点，一个结点控制一个或多个控件的动画，好比我如今选中的这个 eye_right，它同时控制了两个shape：右眼外边的框和里面的眼白，调整这个node，右眼外边的框和里面的眼白的属性都会跟着一块儿变化：

   Solo也是控制点，和node很像，也是用来控制一个或多个控件，好比上图中瞳孔的属性则是经过solo控件 pupil_right来控制的，调整它的属性，瞳孔就会相应变化。
  它和node的区别就是下边这张图中表示的了，solo的每个子控件前都有一个radio button，你能够随时切换这个solo控制哪个子控件（只会控制被选中的，其余的会被标记为de-activate）：

  从上边的图中咱们能够看到，Node和Solo都是有本身的坐标轴的，坐标轴的方向并非随机的，二是遵循了外部包含的bone的坐标；若是没有bone控制，那么默认状况下是标准的直角坐标系：

  若是须要修改坐标系的方向，能够在属性面板中修改Rotation属性，将坐标轴进行旋转：

Bone控件

  Bone，顾名思义就是骨架，因此这个控件，通常画小人的时候用，咱们以小人的左腿为例来分析一下：

  很明显，这条腿上有三根骨头，就是红色数字标识的地方。有了bone，咱们能够很直观地为各个相关联的部件作动画（像人物的手臂啦、旗帜啦、树枝啦）。
  画一组bone很简单，点击菱形，而后屡次单击连成一组bone就能够了，右键单击表示绘制结束：

  如何将bone和path相关联呢？咱们首先选中path控件，右侧菜单栏选择 contected bones，而后在左侧控件树中选择须要关联的bone，就能够啦。

  更多关于bone的操做请点击： Bone
  咱们还能够为bone添加约束，将右侧的属性菜单栏拉到最底部，会有一个添加constraints属性的菜单，能够为bone添加target等：

关于Freeze属性

  咱们最开始讲了，通常来讲，子控件会继承父控件的变换，那么有没有办法让父控件的变换不影响子控件呢？这个时候咱们可使用Freeze控件将这些变换“冻住”。具体的能够看下这个例子：Freeze，操做很简单，就是选中控件，而后修改它的freeze属性就能够了。

flr文件输出

  设计稿画好以后，点击右上角的export按钮，就能够导出.flr格式的资源文件啦：

2019.08更新：
根据最新的2dimensions编辑页面，导出文件的时候会有export和downloadFile两种选项，请必定要选择export。前者导出的是.flr文件，然后者是.flr2d文件，.flr2d文件Flare暂时不支持。

Flare的使用

  最基础的，将flr文件放到工程目录，而后使用FlareActor控件来展现就能够了：

import 'package:flare_flutter/flare_actor.dart';
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new FlareActor("assets/Filip.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"idle");
  }
}
复制代码

  但其实Flare很强大、很灵活的，flr文件里边的每个结点，都是能够获取到的，方便咱们精确地控制动画。使用artboard.getNode(String name)能够获得一个ActorNode对象，使用play(String animationName)能够播放指定动画。因此知道为何让大家取名不要瞎取了吧，否则你写出来的代码可读性会不好。
  若是你想要本身去控制动画，那么自定义一个controller继承自FlareControls就能够了。注意，是FlareControls，不是FlareController，FlareControls继承自FlareController，拥有一些基础的play/mix方法，用起来简单不少。你的自定义controller须要重写三个方法：initialize()、advance()和 setViewTransform()。

• initialize()通常是作初始化操做，此时FlareActor控件已经built好了，咱们能够在此获取node：

_faceControl = artboard.getNode("ctrl_face");
play("idle");
复制代码

• setViewTransform()在动画的每一帧处都会被调用；
• advance()是在每一次artboard即将刷新的时候被调用（尚未开始draw的时候）

关于Nima

  Nima的制做和使用其实和Flare大差不差的，因此就不重复写了。

写在最后

  2dimensions explore 上有不少现成的动画可供参考，你们能够去上边看看，有不少有意思的idea。

  参考文章：

• Building an Interactive Login Screen with Flare & Flutter
• How to Flare a Flutter app