インタラクションまで作れるアニメーションツールRiveの魅力

ウェブサイトやアプリなどでアニメーションするイラストを目にすることがよくあります。クリックしたらアニメーションする「いいね」アイコン、ローディング画面など、最近はインタラクティブでリッチなアニメーションを取り入れたものが多いです。

このようなアニメーションを作るツールとしてLottieが有名ですが、Riveというツールがあるのをご存知でしょうか？　今回はこのRiveのメリットやデメリット、実際にRiveで作ったデモをご紹介します！

Rive公式ページの画像

Riveとは？

Riveはアニメーションを作成できるデザインツールと、それを多様なプラットフォームで実行できるランタイムです。最大の特徴はデザイン、アニメーション、インタラクション、状態に応じた見た目の変化を1つのツール上で作れることです。オンラインエディター、またはダウンロードページからダウンロードしたデスクトップアプリがあります。

1つのツール上で完結できる

RiveはウェブのUI、ゲーム、アプリなどをオールインワンで作成することを目的としたツールです。Introductionにある通り、次のような機能があります。

レスポンシブなレイアウト、再利用できるコンポーネントなどを定義してベクターイメージでデザインできる
デザインしたものをアニメーションさせる
ユーザーの入力、画面サイズ、スクロールなどに応じたインタラクションを作る
アプリ側から渡した値に応じてテキスト、色、画像、レイアウトなどの見た目を変えられる
Riveのランタイムを使ってエクスポートしたデータをウェブやアプリなどにそのまま組み込める

状態を持つアニメーションをGUI上で作れる

RiveにはState Machineという機能があり、アニメーションの状態（ホバー中、クリックされたなど）や状態間の遷移（ホバーからクリック）を管理できます。また、アプリ側から渡した値に応じて見た目を変えるData Bindingという機能もあります。

これらを使うと、クリックやホバーをきっかけにしたインタラクションアニメーションや、スコア表示・進捗バーなどのアプリの状態と連携したアニメーションを作れます。

▼Riveのツール上でアニメーションを実行している様子

「isHovered（ホバーしたか）」などの状態は画面左下、アニメーションは画面中央下で視覚的に確認できます。複数のアニメーションや状態を線や矢印などで組み合わせながらアニメーションを作成します。

RiveのGUIでアニメーションが作れる

独自の`.riv`フォーマットで効率的

Riveから出力したファイルは.rivという独自のバイナリファイルです。.rivにはツール上で作成したアートボード、アニメーション、State Machine、Data Bindingなどの情報が1つにまとまっています。このファイルをそのままウェブやモバイルアプリに読み込みます。

ファイルの読み込み速度やファイルサイズのバランスを考慮し、効率的にデザイン、実装ができるように考えられています。

※.rivファイルはランタイムで利用するためのフォーマットです。バックアップ、編集用には.revというフォーマットを使用します。.revをランタイムで読み込むことはできません。

多様なプラットフォームで使える

Riveのランタイムはウェブ、iOS、Android、Unityなどさまざまなプラットフォームで使えます。Riveのドキュメントでは対応しているプラットフォームでの使い方を一つひとつ確認できます。

Lottieとの違い

LottieもRiveも、どちらもアニメーションをあつかう選択肢の1つです。Riveは1つのアプリ内でデザイン、アニメーション、実装まで完結できることを強みにしています。モックアップを別ファイルで作ったりすることなく、デザイナーやエンジニアが同じツールで作成・編集・確認できます。

アニメーションの再生やインタラクションにとどまらず、Data Bindingを使った状態に応じたアニメーションも作成できます。データの管理はアプリで、見た目の変化やアニメーションはRiveにまかせる、といった役割分担も可能です。

Riveのデメリット

ここまでRiveの魅力を紹介してきましたが、もちろんデメリットもあります。

無料版だと機能に制限がある

Riveは無料版と有料版があります。無料版はおもに学習や個人プロジェクト向けです。作成したファイルを.rivでエクスポートすることはできません。Pricingページにもあるとおり、アプリやプロダクトに組み込みたい場合は有料プランが必要です。

なお、RiveのランタイムはMIT Licenseのため商用利用が可能です。

Riveで作ったデモを紹介

ここからはRiveで実際に作ったデモを紹介します。いずれもインタラクションはツール上で作り、JavaScriptではファイルを読み込んだだけです。

▼.rivファイルを読み込むだけ

const star = new Rive({
  src: "./star.riv",
  canvas: document.getElementById("star"),
  artboard: "star",
  autoplay: true,
  stateMachines: "stateMachine",
  onLoad: () => {
    star.resizeDrawingSurfaceToCanvas();
  },
});