打开Flutter动画的另一种姿势——Flare

2019-05-12 本文已影响2人宅居居士

开头

日常开发过程中我们时常能遇到动画的需求，flutter中使用动画的方式主要分为三种：

1.通过 AnimationController 及各种 Animation（如线性动画TweenAnimation、非线性动画CurveAnimation）与Widget的结合，来达到使组件动起来的效果。比如：

2.通过 Hero动画 来做页面之间的跳转效果，比如：

3.通过 CustomPainter 结合 Canvas 来实现自定义的动画。

其中，第三点可实现的内容最为丰富，同时也最为复杂。这里要介绍的是第四种动画实现方案： Flare绘制动画

关于Flare

Flare简介

Flare是一款 免费的 网页版的动画制作工具，通过Flare我们可以轻松创建 60fps 的矢量动画。

Flare地址(科学上网)

为什么要使用Flare

通过代码创建动画是一件很 romantic 的事情，同时也是很费神费心的事情。稍稍遇到一些不够规则、非线性的动画需求，你的头发又会止不住的往下掉。

而通过Flare去实现本该靠代码完成的动画，可以极大的提高效率。

Flare的适用场景

Flare适合于那种交互性不强的动画，即代码与动画效果关系不大的动画。

使用Flare创建矢量动画，不仅可以有效减少文件体积，还能获得超高的动画效果。

使用Flare

使用Flare之前，首先准备好一架通往世界的梯子。

注册登陆

然后进入 2D - Animation Tools for Apps, Games, and Web

首先，注册好账号，如果有Google账号，可以直接使用。

登陆成功后则可以开始创建动画了：

点击 “Your Files”

创建新的Flare文件后，需要选择文件的属性，如果是 public 则免费使用，同时你的作品也会被公开；如果是 privete 则需要一定费用。默认为 public

绘制动画

之后则可以开始动画制作了，以一个简单的按钮为例：

选择矩形工具：

画完一个矩形后，点击左侧资源区的 Artboard 画板，在右侧调整其Size大小：

接着调整所绘制的矩形属性：

接下来，点击左侧资源区的 ANIMATE 进入动画设计模式，该模式下，无法增加或删除资源文件，点击矩形，在右侧记录 矩形大小与矩形圆角 在初始帧的属性：

然后调整中下方的区域，首先打开动画时长区间，然后将指针拨到00:01:00（mac可以使用快捷键command+shift+左右，windows可以使用快捷键ctrl+shift+左右，一次调整10帧）

在00:01:00处，更改矩形的属性：

点击播放键,效果如下：

目前，动画是线性运行的，我们圈中所有的时间节点，然后在右下角进行一个插值器的调节：

再看效果如下：

然后我们将这个动画左下角命名为 tap，之后再创建另外一个动画，命名为 loading ，这两个动画是互不相干的：

将动画切换到 loading ，这时候绘制的界面会停留在上一个动画的最后一帧，所以可以事先把时间选择器放在第一帧上。在左边的资源区，切换到 DESIGN 模式，再创建三个小球用作加载：

选中三个小球按 command+g（windows是ctrl+g）可以将其分组，可以把这个组命名为 loading_ball:

之后再切回 ANIMATE ,在 loading 动画的初始帧，把矩形属性设置为 tap 动画最后一帧时的属性，同时记录下三个小球的高度属性，之后再做动画：

因为是loading，所以选择了循环动画，效果如下：

由于每次在资源区新增元素后，动画区也会显示这个新的资源，比如下面这样，可以通过 opacity 来隐藏无关元素：

之后还需创建两个动画，分别为 success 与 fail ，在此之前先准备好另外两个资源

check：

对勾创建完成后，像之前一样，隐藏掉，需要使用时再显示，然后创建用来表示错误的叉

cross：

然后创建动画，只以success为例,效果如下：

只需要注意，其中的对勾 路径动画 实现的要点在于图形以路径存在，而不是填充式存在

接着是错误时的动画效果：

然后再创建一个不动动画 normal 用于记录按钮的初始状态即可

动画项目地址如下：

https://www.2dimensions.com/a/homeman/files/flare/animation_test/preview

导入flutter

首先，导出这个flare文件

之后在flutter项目中添加flare插件,同时在 lib 同级目录下创建 flrs 文件夹用于存放 flr文件：

运行 flutter packages get 后，即可准备开始使用动画了。

代码交互

示例代码如下：

String _currentAnimation = "normal";

GestureDetector(
          onTap: () {
            if (_currentAnimation == "normal") {
              setState(() {
                _currentAnimation = "tap";
              });
            }
          },
          child: FlareActor(
            "flrs/animation_test.flr",
            animation: _currentAnimation,
            fit: BoxFit.contain,
            callback: (animationName){
              switch(animationName){
                case "tap":
                  break;
                case "success":
                  break;
                case "fail":
                  break;
              }
            },
          ),
        )

说明：

FlareActor：用于展示flr文件的Widget
animation参数: 播放动画的名字，也是标识
callback(animationName): 当前所播放的动画结束后的回掉，动画名则是参数animationName

下面以伪代码的形式来实现交互：

callback: (animationName){
              switch(animationName){
                case "tap":
                setState(() {
                        _currentAnimation = "loading";
                      });
                  doLogin((success){
                    setState(() {
                      _currentAnimation = "success";
                    });
                  }, (fail){
                    setState(() {
                      _currentAnimation = "fail";
                    });
                  }, (error){
                    setState(() {
                      _currentAnimation = "fail";
                      //处理其他错误逻辑
                    });
                  });
                  break;
                case "success":
                  doSuccess();//处理其他成功逻辑
                  setState(() {
                    _currentAnimation = "normal";
                  });
                  break;
                case "fail":
                  doFail();//处理其他失败逻辑
                  setState(() {
                    _currentAnimation = "normal";
                  });
                  break;
              }
            },

动画效果分别如下

success: