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加入

1
2
dependencies:
  flare_flutter: ^1.4.0

2.然后flutter packages get下载依赖

3.添加资源

在pubspec.yaml的asset中声明我们刚才制作的的文件

1
2
3
flutter:
  assets:
    - assets/anim/buttonAnim.flr

4.引入动画，使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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来加在我们的动画：

1
2
3
4
5
6
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