UIデザインにインタラクティブなアニメーションを取り入れたいけど、どこから始めればいいのか分からない...。そんな悩みを抱える方も多いのではないでしょうか。Riveは、ビジュアルデザインからアニメーションまで1つのツールで作成できるほか、ユーザーのカーソル移動などの入力操作にデザインを反応させたり、インタラクティブなコンテンツに仕上げたりすることができるツールです。
本記事では、動きのスケッチからWebサイトへの実装まで、UIにアニメーションを取り込む際に必要な作成フローを紹介します。この記事を読むことで、Riveを使ったインタラクティブコンテンツの制作方法が学べます。
前編に続き、後編ではユーザーの操作を検知してアニメーションの状態遷移させる設定を作り、アニメーションを完成させてから、実際にWebサイトに表示するまでを実践します。
＞＞＞ 前編はこちら
ViewModelを使ってアニメーションを切り替える
エディターでの最後の作業として、ヒットエリアへのカーソル侵入した時に、アニメーションステートを切り替える仕組みを作ります。条件を管理するために、ViewModelを導入します。簡単に言えば、アニメーションやデザインの状態管理に用いる値（以降、プロパティと呼びます）を管理するための場所です。
ViewModelを作ることでコード側から状態の細やかな調整も実現できるようになるため、アニメーションはRiveエディターで作り、状態管理はすべてコード側に記述するようなワークフローも実現できます。今回はViewModelで遷移条件を、前編でも扱ったState Machineで遷移関係を設定し、インタラクティブなコンテンツに仕上げていきます。
まず、初期状態から存在するViewModelにプロパティを追加します。アニメーションの遷移条件としてプロパティ「isMouseOver」をBooleanで追加しました。最後に、遷移の条件を追加します。 処理の順番としては、以下の通りです。
1.ヒットエリアにカーソルが侵入した時に、ViewModelの「isMouseOver」をtrueに変更
2.｢isMouseOver」がtrueになったら、「Waving」ステートに遷移
新しいListenerとして「hitbox enter」「hitbox exit」を作成して図のように設定しました。目の追従の時との差異としては、ヒットエリアで検知するユーザーアクションがカーソルの侵入／離脱になっていること、リスナーアクションが「isMouseOver」の値を変更することの2点です。
次に「isMouseOver」を遷移条件としたステート間の遷移を設定します。ステートマシンに「Waving」ステートをドラッグ＆ドロップして配置します。「Blinking」ステート付近にカーソルを移動すると、小さな円が表示されるので、その状態でドラッグして「Waving」ステートにカーソルを合わせます。ドラッグ状態をリリースすると、遷移の設定が完了します。カーソルがヒットエリアから離れた時には、「Blinking」ステートに戻したいので、逆方向にも繋いでおきます。
線の上の右矢印アイコンをクリックすると空のリスナーアクションの領域が表示されます。 右上にある＋ボタンをクリックすると、ifから始まる条件の設定が追加されます。ifの隣にあるプルダウンボックスをクリックして「isMouseOver」を選択し、Valueの右隣のボックスにはtrueを設定します。左矢印のアクションは「isMouseOver」をfalseにしておきます。
これでヒットエリアのカーソル侵入をトリガーに、ステートを遷移させることができました。
作成したアニメーションをWebサイトに実装してみる
続いて、Riveで作成したアニメーションをWebサイトに表示してみましょう。
早速、作成したアニメーションを書き出します。エディタ画面の右上にあるExportボタンから、Export for Runtimeをクリックします。RUN RIVE ANYWHEREというタイトルのポップアップが表示されるので、その中のExport your Rive fileと書かれたボタンをクリックすると、ファイルをダウンロードできます。
コード側で必要な作業はほとんどありません。今回作成したコードは以下となります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rive Hello World</title>
</head>
<body>
<!-- Riveのアニメーションをcanvasに表示 -->
<canvas id="canvas" width="500" height="500"></canvas>
<!-- ランタイムの読み込み -->
<script src="https://unpkg.com/@rive-app/canvas"></script>
<script>
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;
},
});
</script>
</body>
</html>このようにわずかなスクリプトのみで、インタラクティブなアニメーション要素を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を使えば軽量で高性能なインタラクティブアニメーションを実現できます。ぜひ皆さんの業務にも取り入れてみてください。
- 北田 雅
- フェンリル株式会社 デザイン部所属 デザイナー
- 2019年フェンリル入社。UIデザイナーとして、ウェブ業務システムからモバイルアプリまで幅広いプロダクトのUIデザイン・インタラクションデザインに従事。プライベートでの音楽創作のスキルを生かし、フェンリル製作のオリジナルアプリでBGM制作を担当するなど、領域を限定せず多角的にアウトプットを続けている。
2026.01.22 Thu