Flutterでリッチなアニメーションを表示させよう！【Rive】

Riveとは

Rive

Riveとは、リッチでおしゃれなアニメーションや動きを色んなプラットフォームに使えるようにしたWebサービスです。
Rive上のエディタでアニメーションを作成し、そのアニメーションを実際のアプリに簡単に組み込むことができます。

今回は、主にFlutterでのアニメーションの実装の部分にフォーカスして話を進めますが、アニメーション自体の作り方などは公式のサイトがすごく参考になると思います

Riveリソース
Tutorial

実装

パッケージのインストール

riveをインストール

pubspec.yaml

dependencies:
  rive: ^0.6.7

Assetsに追加

https://rive.app/community/
コミュニティに色んなアニメーションが既にあるので、ここからダウンロードすることによってすぐに使うことができます。

右の「Download」をクリックすると.rivファイルがダウンロードされるます。

ダウンロードしたら、プロジェクトに戻ってプロジェクト直下にassetsディレクトリを作成。
そして、さっきの〇〇.rivをassetsフォルダの直下配置します。

pubspec.yamlに追加したアセットのパスを追加。

pubspec.yaml

assets:
  - assets/love_note_4.riv

アニメーションを開始

実際にアニメーションを表示させる部分を実装していきます。
まずは、変数を定義

main.dart

Artboard _artboard;
RiveAnimationController _controller;

その後、initStateに以下のコードを追記

main.dart

rootBundle.load('assets/love_note_4.riv').then(
  (data) async {
    final file = RiveFile();

    if (file.import(data)) {
      final artboard = file.mainArtboard;
      artboard.addController(_controller = SimpleAnimation('note'));
      setState(() => _artboard = artboard);
    }
  },
);

行っている処理としては、アセットの.rivファイルを読み込み、それをRiveFileオブジェクトとして作成。
また、同時にRiveAnimationControllerを継承したSimpleAnimation('note')をartboardに追加。
SimpleAnimationの引数は.rivファイルをRiveのエディタで開いた際のアニメーション名を渡す。
(下のスクショの赤い枠の部分がアニメーション名)

そして、好きな箇所にRive(artboard)を追加

main.dart

Rive(artboard: _artboard)

おまけ。

このアニメーションを途中で停止さたい場合は、_controllerのisActiveを命令的にfalseにしてやれば良い。
例えば、、、

main.dart

void _togglePlay() {
  setState(() {
    _controller.isActive = !_controller.isActive;
  });
}

これをどっかのonTapやonPressedに渡してやる。

終わりに

Flutterでいい感じのローディング用のアニメーションないかな〜と探していたところ、これを発見しまして色々触ってみたところかなりいい感じだったので紹介させてもらいました。

全体のコードや最初のGIFで載せてるコードはGitHub上にあげていますので、お好きにご覧ください！
https://github.com/shotaro427/rive-sample