Flutter Rive使用详解(Flare动画)

简介

(前身为 2Dimensions, 曾发布 Flare 图形工具),最值得注意的是支持导入由 Adobe After Effects 生成的 Lottie 文件, 这样一来, 就能够实现 Flutter 与现有动画工作流的深度集成. Rive 现已为多种层叠效果添加了支持, 例如投影, 内阴影, 光晕, 模糊和遮照.

优势

用户无需再在代码中重新创建一遍设计和动画, 从而大大简化了设计师与开发者之间的交接工作.
这意味着设计师可以随时进行迭代和更改
由于 Rive 输出的文件可以直接与 Flutter 集成, 而不仅仅是 MP4 视频或 GIF 图像, 因此 Rive 允许您创建复杂且动态的交互, 游戏角色, 动画图标和引导界面

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或者游戏当中。也很大程度上降低了设计师和程序员的沟通成本。

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

15790041231406.jpg

制作动画

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

15790042183786.jpg

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

15790042980745.jpg

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

15790043520271.jpg

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

15790043635669.jpg

导入到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 {

  //  初始动画状态
  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