【Rive】【React】使ってみたTipsまとめ

最近、個人的にRiveというアニメーションツールがお気に入りでいろいろ使ってみています。
使用してみた所感や、制作時に役立つかもしれないポイントなどをまとめてみようと思います。

※筆者は現状React環境でしか使用していません。

Riveとは

Riveはコーディングなしでもインタラクティブなアニメーションを作成できるツールです。
WebやReact、React Native、iOS、android、Unity、Unreal Engineなどの様々なプラットフォームで使用できます。
しかもデータが驚くほど軽くて、4K解像度で作ったときも500KBくらいでした。すごい！

有名どころで言うとDuolingoのアニメーション制作に採用されています。

使ってみたいよという方はまずはRiveの公式Youtubeでの学習がおすすめです。
短い動画でまとめられていてちょっとした空き時間に学習できます。

制作したもの

個人で制作したものを紹介します。

おみくじ

astroとreactで制作したおみくじを引けるWebコンテンツです。
フロントはrivファイルを読み込んでいるだけで、他は全部Riveで制作しています。
おみくじのランダム出し分けもRiveだけでできちゃうんですね〜すごい！

カーソルを追うウサギ

こちらもastroとreactで制作しました。
動かしたカーソルの方向にウサギが向いてくれます。
これもフロントはrivファイルを読み込んでいるだけです！

制作時のTipsまとめ

ここからは自主制作や案件で使用した際に得た知見いろいろを書いていこうと思います。
ツールの使い方などは上記の公式サイトやYoutubeに掲載されているので割愛します。

rivデータが重すぎるときはアセットファイルの設定を見直そう

軽いと評判のRiveですが、最初はなぜか重すぎて「ぜんぜん軽くない...」となっていました。
探ってみるとアセットファイルが原因でした。

Assetsタブにはインポートした画像や使っているフォントなどを一覧で見ることができます。

クリックすると、そのデータの詳細が表示されます。

ここで重要なのがExport Optionsの項目です。
ここのTypeがデフォルトだとEmbedded（埋め込み） になっています。
ここをReferenced（参照） に変更することによってデータの軽量化が期待できます。

また、フォントのExport OptionsにはTypeの他にIncludeという項目があります。
これはどの文字を含めるかを設定できます。
デフォルトだとAll Glyphsとなっていて、使っていない全ての文字データも含める設定になっています。
英文フォントならまだしも日本語フォントでこれになっているとめっちゃ重くなります。
Glyphs used（使用している文字） に設定することをおすすめします。

Vite環境だとRuntimesのLayoutが使えない？

現在の最新バージョン（@rive-app/react-canvas 4.17.5）だと以下のエラーが出てしまいRuntimesのLayoutが使えませんでした。
エラーのとおりに修正してみてもだめでした...。
Layoutを使わずに表示させることは可能でした。

[ERROR] [vite] Named export 'Alignment' not found. The requested module '@rive-app/react-canvas' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@rive-app/react-canvas';
const {Layout, Fit, Alignment} = pkg;

同じエラーが出てしまっている方もいるみたいなので現状だとVite環境での使用ができないかもしれません。
解決策ご存知の方いらっしゃいましたら教えてくださると幸いです

webpack環境だと問題なかったのでRiveを使う予定のプロジェクトはwebpackを検討してみてください。
（Rsbuildも大丈夫そうかも？まだ試してないです。）

特定のアニメーションが終わったら処理を走らせたい

RiveのRuntimesには再生されたとき、一時停止したとき、停止したときなどのそれぞれのイベントに対してcallback関数を設定できます。

アニメーションが終了したときのイベントは残念ながら現状はありませんが、ステータスが変更したとき（StateChange） というイベントを利用することで実現することができます。

ステータスが変更されるのはアニメーションタイムラインが走り始めたときです。

以下のようにStateChangeにcallback関数を設定してみると

const riveParams = {
  src: baseMapAnimation,
  artboard: 'artboard',
  stateMachines: 'StateMachine',
  layout: new Layout({
    fit: Fit.FitWidth,
    alignment: Alignment.Center,
  }),
  autoplay: true,
};
  
const { rive, RiveComponent } = useRive(riveParams);

useEffect(() => {
  if (!rive) return;
  rive.on(EventType.StateChange, (event) => {
    console.log('StateChange', event);
  });
}, [rive]);

dataにアニメーションがスタートしたタイムラインの名前が配列で入ってきます。

StateChange
{
  data: [
    "Timeline_01",
    "Timeline_02"
  ],
  type: "statechange"
}

これを利用して、アニメーション終了用のタイムラインを作成することで終了時に処理を走らせることができます。

終了時に処理を走らせたい特定のタイムラインの最後のキーフレームを
アニメーション終了用タイムラインの最初のフレームに打っておくのがポイントです。

特定のタイムライン終了後にアニメーションがない場合、これをしておかないと画面が真っ白になってしまいます。

あとはStateChange時にアニメーション終了用タイムラインの名前がdataにあるかどうかを判定すればOKです。

useEffect(() => {
  if (!rive) return;
  
  rive.on(EventType.StateChange, (event) => {
    if (
      Array.isArray(event.data) &&
      event.data[0].startsWith('Timeline_exit_')
    ) {
      // アニメーション終了時に走らせたい処理
    }
  }, [rive]);
});

さいごに

学習コストは高めですが、同じツール内でデザイナー、モーションデザイナー、エンジニアがシームレスに作業ができるので認識の齟齬も生まれないしとても良いな思っているので日本でも流行ってほしいです。