はじめに

Flutterで利用可能なアニメーションを作成するWebツール、Riveを使ったアニメーション作成例の記事です。この間まで、Flareという名前だったこのツールですが、先日のFlutter Interact '19でRiveに変わりました。

今回はRiveを使って、SVGのPathを変化させるアニメーション(パスモーフィング)を作り、Flutterに組む方法を紹介します。

今回つくったもの

多角形の頂点数を増やしてアニメーションさせるものです。
4→5→６→7→8と増やしていき、8角形になったら最初の4角形に戻ります。

Riveでの操作

ここからRiveでの操作の説明になります。

はじめの状態の図形を作る

+マークから、作成したい図形を作ります。

はじめの図形の4角形をPolygonで作りました。

pathに変更する

そのままではpathとして扱えないので、CONVERT TO PATHでpathに変換します。

EDIT VERTICESでpath頂点の編集ができます。

4角形をpath化した状態だと上記のようにpathの頂点は4つできます。

pathを変形させるアニメーションではpathの頂点の変化を記述していくため、アニメーション中の頂点数が同じである必要があります。
(参考)https://www.webcreatorbox.com/tech/svg-morphing

今回は4角形→8角形に変化させていくため、頂点数をはじめの図形から8つにしておきます。

上部のPenを選択することで、頂点を増やすことができます。

頂点を8つにしました。

アニメーションを作る

アニメーションの追加/名前設定

タブをANIMATEに移し、アニメーションを作成していきます。
+ボタンでアニメーションの追加ができます。
Untitledという名前で作られますが、ここで指定した名前をFlutterのコード内で指定するので、適切な名前を付けておきます。

◆マークをチェックする

変形させたい図形を選択し、右側ペインのEDIT VERTICES横にある、◆マークをチェックします。
◆マークをチェックすることで、ある時間での要素の状態を決めることができます。
ここでは時間00:00:00時点でのpathの形を固定しました。

時間経過後の変形

1秒後に5角形になるようにします。

下の時間スライダーを00:01:00に動かし、右側ペインのEDIT VERTICES横にある、◆マークをチェックします。

EDIT VERTICESで編集し、完了したらDONE EDITINGで保存します。

4角形から5角形の変形ができました。

繰り返し

あとは同じ要領で変形するポイントを追加していきます。

Flutterに組み込む

Export

Flutterに組み込める形にExportします。


右上のボタンよりExportします。FormatはBinaryにします。
.flr形式のファイルがダウンロードされます。

Flutterプロジェクトに配置

適当なディレクトリに.flrファイルを配置し、FlareActorで読み込めば、アニメーションが行われます。
FlareActorはこちら (https://pub.dev/packages/rive) をdependenciesに追加することで使えます。中ではflare_flutterに依存していますが、名称変更に伴いラップしたものが用意されたようです。

UIと協調させる

上の例では多角形の変化をひとつなぎのアニメーションにしました。
次の例では、ボタン押下時に次の形に変形するようにしてみます。

この場合、アニメーションが1つだと難しかったので、複数のアニメーションに分割することで対応できました。

このように、多角形1つの変化のみのアニメーションを複数作ります。(画像は5角形→6角形のアニメーション)

コードでは、アニメーションの名前を保持しておき、ボタンが押される度に、setStateで使われるanimationを変更するように実装します。

class _AnimationSample02PageState extends State<AnimationSample02Page> {
  final List<String> _animations = [
    '4_to_5',
    '5_to_6',
    '6_to_7',
    '7_to_8',
    '8_to_4',
  ];

  int _animationIndex;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animation Sample 02'),
      ),
      body: Column(
        children: <Widget>[
          (略)
                child: FlareActor(
                  'images/path_morph.flr',
                  fit: BoxFit.contain,
                  animation: _animationIndex != null
                      ? _animations[_animationIndex]
                      : null,
                ),
          (/略)
          ,
          FloatingActionButton(
            child: Icon(Icons.autorenew),
            onPressed: () {
              setState(() {
                if (_animationIndex == null ||
                    _animationIndex == _animations.length - 1) {
                  _animationIndex = 0;
                } else {
                  _animationIndex++;
                }
              });
            },
          )
        ],
      ),
    );
  }
}

完成

さいごに

Riveを使って作ったpathを変化させるアニメーションをFlutterに組み込むことができました。
簡単なアニメーションだけでなく、実践的なアニメーションも作れるよう頑張ります。

今回作成したアニメーション、コードは以下にあります。
* Riveのファイル : https://rive.app/a/iiinaiii/files/flare/path-morph-sample-02/preview
* Flutterコード : https://github.com/iiinaiii/Flutter-UI-Samples/blob/master/lib/ui/animation_sample_02.dart

参考

https://www.webcreatorbox.com/tech/svg-morphing
https://rive.app/a/nimbbble/files/flare/morphing/preview