インタラクティブアニメーションツール「Rive」を使ってみよう（後編）

UIデザインにインタラクティブなアニメーションを取り入れたいけど、どこから始めればいいのか分からない...。そんな悩みを抱える方も多いのではないでしょうか。Riveは、ビジュアルデザインからアニメーションまで1つのツールで作成できるほか、ユーザーのカーソル移動などの入力操作にデザインを反応させたり、インタラクティブなコンテンツに仕上げたりすることができるツールです。

本記事では、動きのスケッチからWebサイトへの実装まで、UIにアニメーションを取り込む際に必要な作成フローを紹介します。この記事を読むことで、Riveを使ったインタラクティブコンテンツの制作方法が学べます。

前編に続き、後編ではユーザーの操作を検知してアニメーションの状態遷移させる設定を作り、アニメーションを完成させてから、実際にWebサイトに表示するまでを実践します。
＞＞＞ 前編はこちら

目次

ViewModelを使ってアニメーションを切り替える

エディターでの最後の作業として、ヒットエリアへのカーソル侵入した時に、アニメーションステートを切り替える仕組みを作ります。条件を管理するために、ViewModelを導入します。簡単に言えば、アニメーションやデザインの状態管理に用いる値（以降、プロパティと呼びます）を管理するための場所です。

ViewModelを作ることでコード側から状態の細やかな調整も実現できるようになるため、アニメーションはRiveエディターで作り、状態管理はすべてコード側に記述するようなワークフローも実現できます。今回はViewModelで遷移条件を、前編でも扱ったState Machineで遷移関係を設定し、インタラクティブなコンテンツに仕上げていきます。

ViewModelにBooleanプロパティを追加するまず、初期状態から存在するViewModelにプロパティを追加します。アニメーションの遷移条件としてプロパティ「isMouseOver」をBooleanで追加しました。最後に、遷移の条件を追加します。 処理の順番としては、以下の通りです。

1.ヒットエリアにカーソルが侵入した時に、ViewModelの「isMouseOver」をtrueに変更
2.｢isMouseOver」がtrueになったら、「Waving」ステートに遷移

新しいListenerとして「hitbox enter」「hitbox exit」を作成して図のように設定しました。目の追従の時との差異としては、ヒットエリアで検知するユーザーアクションがカーソルの侵入／離脱になっていること、リスナーアクションが「isMouseOver」の値を変更することの2点です。

新しいListenerとして「hitbox enter」「hitbox exit」を作成する次に「isMouseOver」を遷移条件としたステート間の遷移を設定します。ステートマシンに「Waving」ステートをドラッグ＆ドロップして配置します。「Blinking」ステート付近にカーソルを移動すると、小さな円が表示されるので、その状態でドラッグして「Waving」ステートにカーソルを合わせます。ドラッグ状態をリリースすると、遷移の設定が完了します。カーソルがヒットエリアから離れた時には、「Blinking」ステートに戻したいので、逆方向にも繋いでおきます。

ステートマシンに「Waving」ステートをドラッグ＆ドロップして配置する線の上の右矢印アイコンをクリックすると空のリスナーアクションの領域が表示されます。 右上にある＋ボタンをクリックすると、ifから始まる条件の設定が追加されます。ifの隣にあるプルダウンボックスをクリックして「isMouseOver」を選択し、Valueの右隣のボックスにはtrueを設定します。左矢印のアクションは「isMouseOver」をfalseにしておきます。

ifから始まる条件の設定を追加するこれでヒットエリアのカーソル侵入をトリガーに、ステートを遷移させることができました。

作成したアニメーションをWebサイトに実装してみる

続いて、Riveで作成したアニメーションをWebサイトに表示してみましょう。

早速、作成したアニメーションを書き出します。エディタ画面の右上にあるExportボタンから、Export for Runtimeをクリックします。RUN RIVE ANYWHEREというタイトルのポップアップが表示されるので、その中のExport your Rive fileと書かれたボタンをクリックすると、ファイルをダウンロードできます。

「Export for Runtime」から「Export your Rive file」をクリックして.rivファイルをダウンロードコード側で必要な作業はほとんどありません。今回作成したコードは以下となります。

Rive Hello World const r = new rive.Rive({ src: "/buttonCharacter.riv", // ダウンロードした.rivファイル canvas: document.getElementById("canvas"), // アニメーションの表示領域 autoplay: true, // 表示した時にアニメーション再生 autoBind: true, // 初期状態から存在するViewModelを使用 stateMachines: "StateMachine", // 使用するステートマシンの指定 onLoad: () => { // ViewModelを取得, インスタンスの作成, インスタンスのバインドまでをまとめて実施 let boundInstance = r.viewModelInstance; }, }); このようにわずかなスクリプトのみで、インタラクティブなアニメーション要素をWebサイトに取り込むことができました。エディタのみの作業でここまでできるため、コーディングに抵抗があっても、ウェブデザインの表現力を高めることにRiveは貢献することでしょう。.rivファイルという1つのファイルに、デザイン、アニメーション、インタラクションのロジックがすべて含むこともできるため、引き継ぎの負荷も小さく済ませられます。

なお、ローカル環境で直接.rivファイルを読み込むことができない点に注意が必要です。すぐに表示を試す場合は公式のサンプルアニメーションをCDNで読み込むか、自分で用意したサーバー環境に作成したアニメーションファイルを配置する方法や、有料プランでCDN利用、ローカルサーバー、コンテナ環境などを利用する必要があります。

実装まで踏み込むことができるデザイナーの場合、公式のドキュメントを読んでいただくと、できることの可能性をより広げていくことができます。今回は静的なWebサイトで表示しましたが、他にもWebアプリやモバイルネイティブ環境、Unity、Wixの様なノーコードサービスまで、幅広い環境で同じアニメーションの表示が可能です。

ドキュメントには機能の情報が充実していたり、日本語でも気軽に尋ねることができるAIチャットボットもあったりするので、細かい仕様はそちらを参照いただければ幸いです。
※参考：Getting Started with the Rive Runtimes - Rive

まとめ

本記事では、ビジュアルデザインの作成からアニメーション制作、インタラクティブ要素の作り込み、そしてWebサイトへの実装まで、Riveを使った制作の基本的な流れを紹介しました。2～3年前までは、アニメーションの実装に用いるライブラリはLottieが主流で、Illustratorで作成したビジュアルデザインをAfter Effectsに取り込んで作成していました。Riveはそのワークフローを1つのツールにまとめられて、デザイナー側の裁量を大きく拡張している点が最大の特徴です。

マイクロインタラクションからローディングアニメーションまで、Riveを使えば軽量で高性能なインタラクティブアニメーションを実現できます。ぜひ皆さんの業務にも取り入れてみてください。