こんにちは。シフカです。
今回は、インタラクティブに特化したグラフィックツール「Rive」の体験レポートです。Riveを使えば、複雑なことをしなくてもインタラクティブなUIや高度なモーショングラフィックスを生み出すことができます。
実際にゲームなどインタラクティブなコンテンツを作っている人はもちろんのこと、単調に動くプロトタイプや動画によるデモでなく、もっとリアルに操作してもらえるデモを作りたいUIデザイナーにもおすすめかもしれません。実際に作ってみた2つの作例とともに体験することで見えてきたRiveの強みや弱点もまとめているので一緒に見ていきましょう。

Riveとは

Riveは、デジタル製品やWebサイト、ゲームに組み込むためのインタラクティブなモーショングラフィックスやアニメーションを作成できる強力な設計ツールです。ユーザーフレンドリーなデザイン・アニメーションツールに加えて、インタラクティブなコンテンツを作るためのステートマシンを搭載しています。また、リアルタイムでカスタマイズ可能なベクターグラフィックスレンダリングをサポートし、最高120 fpsの高品質なアニメーションを実現します。さまざまなプラットフォームに対応しており、ほぼすべてのアプリケーションやウェブサイトにアニメーションを組み込むことが可能です。

マウスで操作できる画面を作ってみた

Riveではステートマシンという、インタラクションを構築するためのビジュアルコーディングのような機能が用意されています。ステートマシンの使い方によっては、かなり複雑なことまで何でも出来てしまうため、今回はユーザーが動かすマウスカーソルに焦点を絞って作ってみました。

Riveには作ったファイルを簡単にシェア出来る機能が用意されています。
まずは今回コックピットのHUD風アニメーションを作ってみたのでリンク先をご確認ください。実際にマウスとクリックで動かせることが分かるかと思います。

コミュニティにシェアされているファイルは実際にそれぞれのRiveで開いて中身を見ることが可能です。気になる作品など色んな人のデータ構造を覗いて参考に出来るのでありがたいですね。

ちなみに執筆中にスマホからリンクを初めて確認したところ、スマホの指での操作にも対応していて、ステートマシンではマウスとしての設定しかしていなかったので驚きました。

マウスカーソル追従

最初にマウスカーソルに合わせてパーツが追従する動きを作ってみました。
構造のイメージとしては、カーソルレイヤーを用意→実際のマウスの位置を取得してカーソルレイヤーを追従させる→カーソルレイヤーの動きに合わせて任意のオブジェクトを連動して動かすといった流れでした。

まずは、マウスの位置を取得する方法です。
追従させたいカーソルレイヤーと当たり判定用のhitboxオブジェクトを作成します。当たり判定のサイズは基本的にアートボードと同じサイズがいいと思います。

次に右上のモードをアニメーションに切り替えると下段にアニメ用のパネルが出てきます。(モード切り替えはTabキーでも行えます)

ステートマシンが選ばれている状態で、マウスの挙動などを受け取ることが出来るListenersを追加します。追加すると、右下にパラメータが出るので、取得情報をPointer Moveにしてalignを動かしたいカーソルレイヤーにしたら設定完了です。

マウス位置=カーソルレイヤーになったので、次は他のパーツをカーソルレイヤーの動きに連動させるやり方です。

マウスに合わせて動かしたいレイヤーを選択して、右パネルのConstraintsからTransformを追加します。追加されたTransformの設定アイコンの中のTargetをカーソルレイヤーにすることでこのレイヤーも一緒に動くようになりました。

さらに、Strengthの値を変えることで動きにピッタリではなく影響力を弱めたり、数値をマイナス%にするとマウスの動きと反対方向に動かすことが可能です。これらを使ってパーツの階層ごとに影響力を変えてパララックス効果を作っています。

クリックで切り替えアニメーション

このHUD画面で今度はクリックで変形するアニメーションを作成してみました。タイムラインを追加して起動時のアニメーションを作ります。右のパラメータの横にあるひし形アイコンを押すとキーフレームが追加されます。選択中のキーフレームのイージングは右下のパネルで編集可能です。

操作感としてはAfter Effectsを使ったことがある人はかなり分かりやすいのではないかという印象でした。同じ要領で待機中のidleアニメーションも用意しました。

ステートマシンでトリガー作成

先程作った、idleタイムラインをエリアにドラッグ&ドロップして、Entryと繋ぎます。これで初期状態ではidleが再生されるようになりました。次にクリックすると起動アニメーションに切り替わるトリガーを作成します。

InputsパネルからBooleanを追加、当たり判定で作ったhitboxにListenersを追加します。追加したListenersプロパティをPointer DownにしてInputをトグルで切り替えられるようになりました。

待機中と起動アニメーションを繋ぎ、矢印アイコンを押すとパラメータを見ることが出来ます。起動アニメーションへの遷移ではConditionsにOnOffインプットがtrueになったらと設定し、反対に待機中への遷移ではfalseにすることでクリックイベントでアニメーションを切り替えられるようになりました。これでHUDは完成です。

メーターホールドアニメーション

シフカではカーナビや車載関連の仕事もしているため、今度はメーターをテーマにしたアニメーションを作ってみました。マウスのホールドで操作出来るようにしています。

まず0から120をカウントするテキストのアニメーションですが、何人かの作例を見ても力技で作る方法しか分からなかったのでやむを得ずそれを真似しています。テキストの値を簡単にコントロール出来る方法があったらコメントで教えてください…

具体的には、まず1の位としてテキストの内容を0から9にしてキーフレームを1コマずつ打ち、テキストを複製して10の位用にします。10の位では10コマずつ数字が変わってほしいので、キーフレームを全選択してMacだとOption(WindowsだとおそらくAlt)を押しならが間隔を維持したまま広げていきます。

クリックを作った時と似た流れで、押し離し用のListenersを追加してHoldインプットをコントロール出来るようにします。

今回のステートマシンはこのようになっています。押し離しで即時反映で0に戻るサイクルと、メーターが120まで行きずっと押し続けた場合に点滅するアニメを流すようにしてみました。Exit Timeを100%にすることでタイムラインの再生状態を取得し分岐させています。

別軸でマウスをホールド中であることを伝わりやすくするためのアニメーションを作っています。この時にメーターの挙動とは別軸のイベントなのでステートマシンの上部からレイヤーを追加する必要がありそうでした。

自分は最初この追加に気が付かなかったため上手く挙動を構築できずしばらく悩みました。また、作ったタイムラインの再生速度をステートマシン側からもコントロールすることが出来ます。この速度をマイナスにすることでタイムラインを逆再生として扱えるのでわざわざ作らずに済むようです。

Riveの使用感まとめ

グラフィック作成時について、線で内側外側が選べなかったり破線の機能がないなど多機能なデザインツールと比べるとやや使い勝手が悪く感じるシーンもありました。ですがその辺りはSVGがインポート出来るのでユニークな絵作りはIllustratorなどで作っておくことで解決できそうでした。

また、円グラフ作成のようなTrim Path機能が塗りはに対応しておらず線のみの機能でした。さらにクリッピングマスクでは線の塗りは使えずアルファマスクも無いため、メーター作成の時にこれらがバッティングしてかなり悩みました。最終的にメーターのゲージは破線の円をIllustratorでシェイプとして作りインポートし、これをマスクにして線をTrim Pathで動かすことで実現しました。

グラフィック作成時に多少の物足りなさはあるものの、それらが気にならないくらいRiveのステートマシンによるインタラクティブなUI作成は、デザイナーのみでも完結できる点を踏まえると非常に強力で魅力的だなと感じました。特にFigmaなどのプロトタイプツールでは出来ない表現を試したい方や、After Effectsなどに慣れている方で動画によるモック再現から一歩ステージアップしてインタラクションな操作を組み込みたい場合などにピッタリなのではと思いました。

公式YouTubeでは基本チュートリアルだけでも約90の動画が用意されており、ほとんど目を通しましたがかなり丁寧で一般的なシチュエーションなら誰でも好きなものを作れるようになりそうな印象でした。この機会に気になる方は是非試してみてはいかがでしょうか。