flutter 专题十七 Flutter Flar动画实战

Flutter Flar动画实战

在Flare动面出现之前，Flare动画大体可以分为使用AnimationController控制的基础动画以及使用Hero的转场动画，如果遇到一些复杂的场景，使用这些动画方案实现起来还是有难度的。不过，随着Flutter开始支持Flare矢量动面，Flutter的动画开发也变得越来越简单。事实上，Flare动画是一种类似于Lottie的矢量动画方案，使用Flare动面不仅可以有效减少安装包的体积，还能实现传统动画方案无法实现的复杂动画效果。

Rive是一个专业制作Flare矢量动画的网站，网站本身提供了很多免费Flare动画供开发者下载学习。除此之外，Rive还提供了Flare动画的使用和制作教程。为了便于学习和使用Rive网站的Flare动画，需要先注册一个Rive官方账号，如下图所示。
Rive以工程形式来创建和管理Flare动画项目，目前支持创建的Flare动画项目类型有两类，分别是Nima和Flare，区别如下：

• Nima：仅支持光栅图，主要用来为游戏引擎和应用构建2D动画。

• Flare：支持矢量图与光栅图，主要用来为移动App和Web构建实时、高效的动画，同时还支持构建游戏动画。

由于Nima主要用于构建2D游戏动画，所以对于Flutter应用开发来说，只需要新建一个Flare类型的项目即可。

目前，创建Flare项目主要有两种方式，一种是在Rive官网中进行创建，另一种则是通过Rive的客户端进行创建。此处以Rive客户端方式来说明如何创建Flare项目，如下图所示。

首先，打开Rive客户端，然后点击右上角的新建按钮创建一个 Flare空项目，然后就可以开始设计了，如下图所示。

不过，设计并制作Flare动画是一项专业性极强的工作，一般都由设计同学完成，开发同学只需要集成到项目中即可。如果需要为了制作Flare动画，官方也提供了详细的Flare动画制作教程。如果只是想体验一下Flare动画的魅力，那么可以使用Rive社区提供的免费Flare动画，如下图所示。

打开一个免费Flare动画项目，点击面板中【OPEN IN RIVE】选项打开Flare动画源文件，然后点击【DownLoad】将项目下载到本地，如下图所示。

可以看到，下载到本地的Flare动画文件是.riv格式的文件，也是Flare动面需要加载的文件。需要注意的是，Flutter默认情况下是不识别Flare动画文件的，开发前需要我们先安装一下rive插件库，如下所示。

dependencies:
  ...
  rive: ^0.11.8

接着，将之前下载到本地的Flare动画文件拷贝到assets资源文件中，然后在pubspec.yaml配置文件中注册动画文件。现在，我们就可以使用rive库提供的RiveAnimation组件来加载这个动画文件，如下所示。

RiveAnimation.asset('assets/rocket.riv')

其中，asset表示动画文件的路径，是一个必传参数。除了支持加载项目本地的文件外，RiveAnimation还支持网络图片。

同时，一个Flare动画文件是由多个动画节点构成的，通过这些动画节点，我们就可以很容易对动画进行精准的控制。我们可以打开Flare动画文件，然后在源文件面板的左下角来查看这些动画节点，如下图所示。

事实上，为了更好的在项目中使用Flare动画，并对动画进行精准控制，rive插件提供了一个RiveAnimationController控制器。借助它，开发者可以很容易的监听Flare动画的各种状态，以及对动画节点进行更精准的控制，如下所示。

class PlayPauseAnimationState extends State<PlayPauseAnimation> {

  late RiveAnimationController controller;
  void togglePlay() => setState(() => controller.isActive = !controller.isActive);
  bool get isPlaying => controller.isActive;

  @override
  void initState() {
    super.initState();
    controller = SimpleAnimation('idle');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RiveAnimation.asset(
        'assets/off_road_car.riv',
        fit: BoxFit.cover,
        controllers: [controller],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: togglePlay,
        tooltip: isPlaying ? 'Pause' : 'Play',
        child: Icon(isPlaying ? Icons.pause : Icons.play_arrow),
      ),
    );
  }
}

在上面的代码中，我们使用RiveAnimation组件加载了一个本地Flare动画，然后再通过RiveAnimationController来控制动画的启动与运行。可以发现，相比传统的动画方案，Flare动画更加灵活，可以用它来实现一些复杂的动画效果。