🚀

Riveでアニメーションがもっと楽しく、もっと身近に!

2025/01/27に公開

Riveってなに?

  • Riveリアルタイムでインタラクティブなアニメーションを作成できるツール
  • ReactやFlutterといったフレームワーク向けライブラリを提供
  • 作成したアニメーションを簡単にアプリへ統合できる!


https://rive.app/

Riveが使われているプロダクト

◆ Duolingo

キャラクターの動きやリップシンク(音声に連動した口の動き)をリアルタイムで制御し、学習体験を豊かにしています!

https://blog.duolingo.com/world-character-visemes/

◆ Notion

AIアシスタントの細かな表情や動きをリアルタイムで制御し、対話をより親しみやすく、楽しい体験にしています!

https://www.fastcompany.com/91192119/notions-new-animated-ai-assistant-looks-more-new-yorker-than-clippy

Rive 3つの魅力!

Riveが多くのプロダクトで活用されている理由は、その使いやすさと可能性の広がりにあります。

1. 🤝 デザイナーとエンジニアの連携がスムーズ

従来、デザイナーが作ったアニメーションをエンジニアが再現するには手間がかかりましたが、
Riveではコードでアニメーションを作り直す必要はもうありません!
作成したアニメーションは読み込むだけで実装可能なため、手戻りや調整作業が大幅に削減されます。

2. ⚙️ 柔軟なアニメーション設計を可能にするステートマシーン

Riveのステートマシーンは、アニメーションを結び付けるロジックを視覚的に設計できる機能です。
さらに、状態の遷移や動きの調整をリアルタイムで制御でき、ユーザー操作や外部データに応じた柔軟なアニメーションが作れます!

3. ⚡ 軽量で高パフォーマンス

Riveはランタイム用に設計されており、より小さく、より速く、より少ないメモリで動作することを目指しています!
Rive vs Lottieでは、役割やパフォーマンスにどのような違いがあるか詳しく記載されています。

https://rive.app/blog/rive-as-a-lottie-alternative

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形式のファイルとしてエクスポートされます。

https://rive.app/community/doc/exporting-for-runtime/docp8HLoCk3G

.rivファイルの読み込み

Reactで.rivファイルを読み込み動かす方法を紹介します。
ここでは、React向けライブラリとして提供されている@rive-app/react-canvasを利用します。

https://github.com/rive-app/rive-react

@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を見てみてください!

参考

chot Inc. tech blog

Discussion