Riveでインタラクティブなアニメーションを作成！Webモーショングラフィックス作成に最適なツール
Webサイトやアプリでインタラクティブなアニメーションを作成できるRiveというツールに出会い、
実際に勉強した後 実務で使ってみて、これはイイと思ったので色々と考えをまとめていこうと思います。
Riveで作成できるものは、コミュニティにデモがあります。
After Effects / Lottie での制作との違い
After Effectsと比べてRiveが向いていると思われる人物像
Webブラウザで動作するモーショングラフィックスを作成するためにAdobe After Effects（以下AE）とLottieを使ったことがあります。
どちらを主に使っていくか比較検討したところ、コスト面・機能面・パフォーマンスなどの違いがあり、自分の環境ではRiveは使えると判断しました。
まず、AEとLottieでのモーショングラフィックス制作でも良さそうな人は下記のような人だと思います。
- 既にAEの操作スキルがある
- デザイン・アニメーター
- モーショングラフィックスアニメーションの制作スキルだけでなく、映像制作全般のスキルも欲しい
逆に、以下のような方はRiveを検討の余地ありです。
- アニメーションを作る機会はそんなに多くない
- AEを常に使える環境にない（契約が必要）
- Webで使えるモーショングラフィックスには興味あるが、映像制作そのもののスキルが欲しいというわけではない
もちろん、アニメーションを作る機会が多い方にRiveがおすすめでないということではありません。
どちらかというと、AEでの制作に辛みを感じているのがこの属性の人なんじゃないかと思っています（私です）。
Riveは、モーショングラフィックスを制作するすべての人に勧められるツールです。
さらに、AEと比較してというわけではありませんが、下記のような人にも良いと思います。
- デザイナーというよりはエンジニア寄りだけど、たまには右脳を使った作業もしたい
- デザイン作成ソフトを使うことに抵抗がない
コスト面の比較
前提として私は、実務でアニメーションを作る機会がそんなにありません。
Web制作で複雑なアニメーションを作るとなるとそれなりの予算が必要となりますが、
モーショングラフィックスはWebサイトでは機能的に必須ではないため、お金を出してまでモーショングラフィックスが欲しいという依頼はそもそも少ないです（身を置いている環境にもよりますが）。
また制作期間もかかるため、デザイナーやアニメーターならともかく、職種がエンジニアだと1ヶ月に何個もアニメーションを作ることにはならないです。
そのような状態で、たまにしか使わないのにAEの単体プランを契約するのは辛いものがありました。
できれば、使う時だけ契約したい…ということを念頭に、両者比較しました。（2023/10現在）
AEの単体プランは、
- 年間プラン → 2728円（1年待たず解約しようとすると解約金を請求される）
- 月々プラン → 3828円
- 無料期間14日間
一方Riveは、基本的に無料で使えます。
しかし無料の場合はエクスポートにRiveのロゴがエクスポートされるので、実務で使う時は、ロゴエクスポートをなくすためにProプランを契約する必要があります。
Proプラン
- 年間プラン → 24ドル
- 月々プラン → 39ドル
これだけ見るとRiveの方が高いです。
使う頻度が少ないため月々プランで比較しますが、Riveは現在のドル円為替で計算すると5000円越え、そこそこ高いのです。
ですが、Riveは「無料で使える」というのが大きな特徴です。
実務ではない時に趣味で使えるので、スキルアップにつながります。
また、実務では制作時にロゴありで作っておき、公開前に月々プランを契約してロゴなしエクスポートする…みたいなことができます。制作コストに39ドル乗ったようなイメージです。
AEでも月々プランを一時的に契約できますが、実務じゃない時も気軽に作りたいと思っていても趣味で軽く契約できるほどではなかったので、Riveの無料エディタ解放は本当に嬉しい限りです。
まとめると、有料プランを比べるとAEの方が安いのですが、Riveはロゴありエクスポートの状態なら無料で使えます。
ソフトの目的の比較
AEはインタラクティブアニメーションを作るためだけのものではなく、映像制作全般のためのソフトウェアです。
LottieはAEで作成したアニメーションをWeb上で動作させるためのライブラリですが、AEで作成したアニメーションの全てがLottieで表現できるわけではなく、何の機能が使えるのかを調べながら作成しなくてはならないためその分の学習コストがかかります。
学習コストというと、かければスキルアップできるような気にもなるのですが
個人的には「アニメーション制作そのもののスキル」と「それを実装するスキル」だけが欲しいので、「AEのどの機能がLottieに対応しているのかの知識」が必要であることは、前向きに捉えられない…というのが悩みでした。
その点、Riveはランタイム用に作られています。つまり、もとからプログラムで実行するよう作られています。
JS、React、React Native、Flutter、Unity、UEなど、多くのオープンソースライブラリでRiveのアニメーションを実行できるようあらかじめ設計されています。
Riveのエディタで作ったものは全てJSで再現できるので、アニメーションの作成や実装に専念できます。
また、そもそも目的がランタイムであるため、ファイルサイズが最適化されているのも良いところです。
Rive公式 Rive vs Lottie
Rive公式で、RiveとLottieについての記事が公開されています。
「ソフトの目的の比較」で書いたようなAE+Lottieの問題点のこと、また、RiveではBodyMovinプラグインのようなものも必要ないこと
ファイルサイズが小さく高速で、メモリ使用量も少ないことなどが挙げられています。
一方で、RiveはAEを置き換えるツールではなく、競合ツールではないことにも言及しています。
AEはポストプロダクションの強力なツールであり、膨大な数のエフェクトを提供しています。
映画やTVのポストプロダクション作業を行なっている場合は、AEを使用する必要がありますが、アプリ・Webサイト・ゲーム用のインタラクティブなグラフィックスを構築している場合は、Riveに満足していただけると思います
…とのことです。
確かにその通りだと思います。
AEが最初から使える方は、LottieがあるおかげでそのスキルでWeb用のモーショングラフィックス作成に活かすことができるし、映像に興味がある人は、たとえLottieで動かない部分がでてきたとしてもAEでのアニメーション制作自体に意味を感じられると思います。
Riveアニメーション制作手順概要
全体フロー
RiveはRive Editorというデザインツールを使ってアニメーションを作成します。
Rive EditorはWebブラウザで操作できるアプリケーションで（デスクトップアプリもあります）Riveのアカウント作るだけですぐに使用できます。
UIもとても見やすく、よくできたツールだと思います。
ちなみに、PSDをインポートしてレイヤー階層を取り込んだり、Lottie Jsonをインポートすることもできます。
基本的な流れとしては、Rive Editor上でシェイプやパス、画像を使ってグラフィックを作り、タイムラインを作成してアニメーションを作成します。
Riveにはステートマシンという機能があり、インタラクティブな実装に必要なデータを付与したり、複数アニメーションを視覚的に組み合わせることができ
外部からインプットしたデータを変化させながら、その場でプレビューを確認したりできます。
ステートマシンを使い、インタラクティブアニメーションを実装した記事を書きました。
【Rive実践編】ステートマシンでインタラクティブアニメーションを実装
Rive Editorでアニメーションができたら、.rivという拡張子のファイルをダウンロードします。
この.rivファイルをJavaScriptでロードし、ブラウザでアニメーションさせます。
一番シンプルな実装
１、アカウントを作成
２、Rive Editorでアニメーションを作成します。
３、HTMLにcanvasタグを追加します。
<canvas id="canvas" width="500" height="500"></canvas>４、@rive-app/canvasをインストールします。
５、JSでRiveインスタンスを作成します。
import { Rive } from '@rive-app/canvas';
const r = new Rive({
src: "rivのファイルへのパス",
canvas: document.getElementById("canvas"),
autoplay: true,
stateMachines: "ステートマシン名",
onLoad: () => {
r.resizeDrawingSurfaceToCanvas();
},
});Riveではランタイムと呼ばれており、JS以外にもさまざまな言語・ライブラリに対応しています。
https://help.rive.app/runtimes/overview
とりあえずテストしてみたい場合は、HTMLに貼り付けるだけの完全な例が公式に載っています。
このコードを貼り付けるだけでローカルでも動作します。
Rive Editorについて
ファイルブラウザとアートボード
Riveではファイルブラウザという機能でファイルを管理します。
アカウントを制作して真っ先に開くダッシュボードで確認できます。
ファイルブラウザを開くと、Figmaのようにアートボードが何個も作れるようになっていて、一つの案件を一つのファイルにまとめ、複数アニメーションを管理できるようになっています。
充実した教則動画
Rive Editorの実際の使い方については、機能が多すぎてここでは紹介しませんが
Riveは使い方を学習するために、Youtubeの教則動画を公開しています。
一本につき2〜15分くらいです。
仕事の合間に見て、大体1週間〜2週間くらいで見終わりました。（全部英語です。もちろん翻訳で見てます）
この動画では、実際にRive Editorでできる操作を機能ごとにわけて紹介していて、全部見ると8〜9割くらいは習得できます（体感）。現時点で動画でカバーされていないところは、ステートマシンについてやJSでのインタラクティブアニメーションの実装についてなどで、その辺りはドキュメントや別の動画を見ながら学習していく必要があります。
2023/10/19 ステートマシンについての動画が追加されていました。これからも未解説の部分は、新しく追加されていきそうです。
Rive Editorを使った所感
ざっと学習した感じ、アニメーション作成は他のデザインツールを使った経験があれば
かなりとっつきやすい操作感だと感じました。
シェイプやパスの扱いはFigmaやIllustratorとほぼ同じで、アニメーションのタイムラインもBlenderやAEと基本は同じです。
これらのデザインツールからモーショングラフィックスの作成に必要な部分だけを取ってきたという感じで、
イラストを描くための細かいコマンドはイラレほどないのですが
機能が凝縮していて一度覚えれば基本操作で迷うことはないと思います。（今後操作コマンドやショートカットは増えるかもしれないという印象はあります）
それでも、独特な部分がいくつかあります。
Riveの操作が独特というわけではなく、モーショングラフィックスを作成するにあたり必要な知識とも言えます。
例えば、パスの向きを意識する必要があります。
SVGアニメーションを1から作ったことのある方は馴染みがあるかもしれませんが、パスには方向があります。
ドーナツを作ろうと思うと、外側のパスを時計回りに作り、内側のパスを反時計回りにしておかないと、穴が開きません。
シェイプパスの型抜きやマージといったものはなく、パスの方向を意識しながらイラストを作っていく必要があるようです。
また、ステートマシーンの操作も独自のものです。
JSで入力したいNumberやBooleanを受け付けるソケットのようなものを作らないといけない場合、ステートマシンでそのソケット（inputs）とタイムラインとの紐付けなどを行います。
また、レイヤーという機能で同時に複数のタイムラインを動かしたり、タイムライン１の後にタイムライン２を動作させるなどの処理もステートマシンで設定できます。
イベントを.rivファイル内に仕込むリスナーの機能もあり（言い方あってるかわかりませんがPCゲームのような仕様）
クリックやマウスオーバー程度のイベントなら、JS側にイベントを作成せずインタラクティブな実装をすることも可能です。
（が、よりカスタマイズ性に優れているのはinputsで数値などを渡す方法だと思います）
ステートマシン自体は直感的に操作できるようになっているので、どちらかと言えば「何ができるか」をドキュメントを見ながら学んでいくことになります。
まとめ
Riveは、アニメーション制作においてなかなか制作環境を整えられなかった自分に刺さったソフトでした。
デザインツールを触ったことがあれば、オペレーションで躓くことがなく
またランタイム用だということで、いくらでもJS側でコネられるところも最高です。
また実際のコードや使い方もそのうち書こうと思います。
