Riveでアニメーションがもっと楽しく、もっと身近に!
Riveってなに?
- Riveはリアルタイムでインタラクティブなアニメーションを作成できるツール
- ReactやFlutterといったフレームワーク向けライブラリを提供
- 作成したアニメーションを簡単にアプリへ統合できる!
Riveが使われているプロダクト
◆ Duolingo
キャラクターの動きやリップシンク(音声に連動した口の動き)をリアルタイムで制御し、学習体験を豊かにしています!
◆ Notion
AIアシスタントの細かな表情や動きをリアルタイムで制御し、対話をより親しみやすく、楽しい体験にしています!
Rive 3つの魅力!
Riveが多くのプロダクトで活用されている理由は、その使いやすさと可能性の広がりにあります。
1. 🤝 デザイナーとエンジニアの連携がスムーズ
従来、デザイナーが作ったアニメーションをエンジニアが再現するには手間がかかりましたが、
Riveではコードでアニメーションを作り直す必要はもうありません!
作成したアニメーションは読み込むだけで実装可能なため、手戻りや調整作業が大幅に削減されます。
2. ⚙️ 柔軟なアニメーション設計を可能にするステートマシーン
Riveのステートマシーンは、アニメーションを結び付けるロジックを視覚的に設計できる機能です。
さらに、状態の遷移や動きの調整をリアルタイムで制御でき、ユーザー操作や外部データに応じた柔軟なアニメーションが作れます!
3. ⚡ 軽量で高パフォーマンス
Riveはランタイム用に設計されており、より小さく、より速く、より少ないメモリで動作することを目指しています!
Rive vs Lottieでは、役割やパフォーマンスにどのような違いがあるか詳しく記載されています。
Riveを活用したアニメーション例
適切に設計されたアニメーションは、プロダクトやウェブサイトを賑やかにするだけでなく、ユーザー体験を向上させる重要な役割を果たします。
以下では、実際のアニメーション例と役立つRive機能を紹介します。
◆ フレームアニメーション
フレームアニメーションとは、いわゆるコマ撮りアニメーションのことで、複数の画像を順番に表示することで動きを表現します!
フレームアニメーションに役立つRive機能
- Solos: 複数の要素をまとめて、そのうちの1つだけをレンダリングできる機能です。Solosを活用することで、フレームごとの画像を切り替えるアニメーションを効率的に実装できます。
- Timeline: Timelineでは、各フレームの表示時間や遷移タイミングを細かく調整可能です。直感的なインターフェースで、アニメーション全体の流れを視覚的に管理できます。
以下の例では、複数の要素をSolosでまとめ、Timeline上で一定時間ごとにレンダリングする要素を切り替えることで、鳥が羽ばたくアニメーションを作成しています。(素材はFreepikより)
◆ ローディングアニメーション
ローディングアニメーションは、コンテンツの読み込み中にユーザーを待たせる間、退屈させないための動きの演出です。単調になりがちな待ち時間を楽しい体験に変えられる重要な要素です!
ローディングアニメーションに役立つRive機能
- Inputs: アニメーションを外部から制御するための仕組みです。ユーザーの操作やシステムの状態に応じてアニメーションを動的に切り替えることができます。
以下の例では、InputsのひとつであるNumberを利用してアニメーションを制御しています。
0~100の値に応じてローディングバーを動かすことに加えて、特定の値を越えるごとにSolosのレンダリング要素を切り替えることで、ローディングアニメーションを作成しています。(素材はFreepikより)
◆ インタラクションアニメーション
インタラクションアニメーションとは、(ここでは)ユーザーの操作に応じてリアルタイムで変化する動きを意味します。例えば、ボタンを押したときに形が変わったり、カーソルを動かすとオブジェクトが追随するようなアニメーションです!
インタラクションアニメーションに役立つRive機能
- Listeners: 特定のイベントを監視し、それに応じた処理を実行する仕組みです。マウスホバーやクリックなどをトリガーにして、アニメーションを動的に切り替えることができます。
- Inputs: 再び登場のInputsです。先ほどのNumberの他にも、BooleanやTriggerを用いてアニメーションを動的に制御することができます。
以下の例では、Listenersでボタン要素へのマウスホバーとクリックのイベントを監視しています。
また、Inputsでマウスホバーしているか(Boolean)、クリックイベントの発火(Trigger)を連動させて、ユーザー操作に反応するアニメーションを作成しています。
アプリへの統合
アニメーションのエクスポート
Riveで作成したアニメーションはひとつのファイルとしてエクスポート可能です。
.riv
形式のファイルとしてエクスポートされます。
.riv
ファイルの読み込み
Reactで.riv
ファイルを読み込み動かす方法を紹介します。
ここでは、React向けライブラリとして提供されている@rive-app/react-canvas
を利用します。
@rive-app/react-canvas
を用いて、Riveファイルを読みこむコードが下記です。
import styles from "./index.module.css";
import { useRive } from "@rive-app/react-canvas";
export function LoadingRiveComponent() {
// 🌟 Riveファイルの読み込み
const { RiveComponent } = useRive({
src: "loading_animation.riv", // Riveファイル名
stateMachines: "State Machine 1", // ステートマシン名
autoplay: true, // 自動再生
});
return (
<div className={styles.container}>
<RiveComponent />
</div>
);
}
これだけで、Riveアニメーションが読み込まれ表示されます!
コードでのアニメーション制御
アニメーションを読み込むことはできたので、コードからアニメーションを動的に制御してみましょう。
ここでは、Inputs(Number)で設定したロード率をコードで変化させます。
import { useRive, useStateMachineInput } from "@rive-app/react-canvas";
import styles from "./index.module.css";
const stateMachineName = "State Machine 1";
const stateMachineInputName = "Loading Per";
export function LoadingRiveComponent() {
// 🌟 Riveファイルの読み込み
const { rive, RiveComponent } = useRive({
src: "loading_animation.riv",
stateMachines: stateMachineName,
autoplay: true,
});
// 🌟 Input(Number)を取得
const loadingPerInput = useStateMachineInput(
rive,
stateMachineName,
stateMachineInputName
);
return (
<div className={styles.container}>
<button
onClick={() => {
if (loadingPerInput && typeof loadingPerInput.value === "number") {
// 🌟 Input(Number)の値を更新
loadingPerInput.value += 10;
}
}}
>
+10
</button>
<RiveComponent />
</div>
);
}
これだけで、Riveアニメーションをコードから動的に制御することができました!
ふりかえり
Riveを使ってインタラクティブなアニメーションを作成・実装できることを紹介しました!
特に、ステートマシーンやInputsを活用した柔軟な制御が印象的で、デザイナーとエンジニアの連携がスムーズになる点が魅力的でした。
軽量で高パフォーマンスな特性も、多くのプロダクトで採用されている理由だと感じます。
紹介しきれなかったRiveの機能もまだまだあります、ぜひドキュメントやCommunity Filesを見てみてください!
参考
- Rive 101: Riveのチュートリアルです。動画を見ているだけでRiveの機能をざっくり把握することができます!
- The Motion Magic: Riveテクニック動画のほか、Riveを学べるコースも提供されています!
- Rive - Community Files: コミュニティに投稿されている作品集です。作品はリミックスすることも可能です!
- Zenn - Riveはデザイナーにもエンジニアにも優しい神アニメーションツール: Rive導入について解説されています、また別記事でもRiveについてわかりやすくまとめられています!
- ICS MEDIA - インタラクションに特化したアニメーションツールRiveの魅力: Rive概要がわかりやすく、JavaScriptで読み込む具体的なコードも示されていて、とても参考になります!
ちょっと株式会社(chot-inc.com)のエンジニアブログです。 フロントエンドエンジニア募集中! カジュアル面接申し込みはこちらから chot-inc.com/recruit/iuj62owig
Discussion