Zenn
JUNNIPublicationへの投稿
🚗

インタラクティブなアニメーションをRiveで✨

Makotty
2022/12/20に公開
React
TypeScript
Vite
rive
rive2
tech

Riveって？

Riveは、リアルタイムのインタラクティブデザインとアニメーションツールとして、インタラクティブなアニメーションをどこでも作成、実行ができるようにするライブラリで、開発者やデザイナーは、Riveのコラボレーティブエディタを使用して、様々な状態や、ユーザーの入力に反応するモーショングラフィックスを作成することができます。

https://rive.app/

オープンソースの軽量なランタイムライブラリにより、Webサイト、アプリケーション、ゲームにアニメーションを追加できます。

対応するプラットフォーム

Web(canvas,WebGL), React, Vue, Angular, React Native, Flutter, iOS, Android, C#

Rive VS Lottie

Webアニメーションといえば、Lottieも有名かと思います。
その比較に関する記事が、公式サイトにあるので、気になった方は、読んでみてください。
双方良いところがあると思いますが、Webだけで完結するRiveは魅力的だと思います。
https://rive.app/blog/rive-as-a-lottie-alternative

デザインを作ってみよう！

新規プロジェクトの作成

ページ右上のNew fileを選択します。
New File
様々なサンプルがありますが、今回はまっさらなアートボード(Blank artboard)を用意して、アニメーションを作成していきます。サイズはお任せします。この記事では500×500で作成します。
サイズが決まったらCreateをクリック。
New Artboard
このようなエディターが表示されていたら成功です。
Editor

既存のアセットについて

Riveで作成するアニメーションには、すでに持っている画像ファイルをアニメーションの素材として使用することができます。
使用できるファイルは、SVG, PNG, PSD, JPGが対応しています。

個人的にはアニメーションの柔軟性が高いため、SVGを使用することお勧めします。

アセットの追加

フリー素材をこちらからダウンロードして、SVGを追加していきます。
このサイトでは、aiデータと、pngでダウンロードできるので、aiをダウンロードして、SVGでエクスポートします。aiからのSVGのエクスポートには注意点があるので
こちらを参考にしてください↓
https://help.rive.app/editor/fundamentals/importing-assets#illustrator
書き出したSVGを追加します。
エディターにドラッグ&ドロップをすると左のパネルのAssetsに追加されると思います。
Assetsの隣の＋ボタンからも追加ができます。
Add Assets
アセットを選択して、アートボードにドラッグ&ドロップするとアートボードに追加することができます。
CAR

アセットを追加すると左のパネルに、
今回であれば、SVGの各パスなどの要素が追加されていると思います。

Artboard Item

アスファルトの追加

なんとなく、Riveのエディターでアスファルトを追加します。
左上のペンツールを選択して、Rectangleを選択します。
Select Rectangle

いい感じに配置します。
Add Asphalt

アートボードの色を空色に

アートボードをクリックして右のパネルのFillsから背景の色を変更します。
Changle Artboard Color
Changle Artboard Color Result

アニメーションを作ってみよう！

右上からAnimateタブを選択するかキーボードのTabキーを打ち、Animateタブに移動します。
早速アニメーションを作成していきましょう！
Select Tab

左下のAnimationsパネルで、+ボタンを押して、Timelineを選択し、アニメーションを作成します。
Add Animation

このアニメーションは「Engine Start」と名付けます。
エンジンをかけたことによって車体が少し上下に動くアニメーションを作成します。

アニメーションとして動かしたい部分(Body)を選択し、右にあるTransformパネルのPositionのうち、Yの♦を押して、初期位置のキーフレームを設定します。
Add Keyframe

始点が設定できていたらOKです。
Add Keyframe Start

0.25秒経ったときのボディの位置を右にあるTransformパネルから数値で決めるか、赤色の矢印で動かしたい位置まで動かします。
すると、0.25秒経った位置に新たなキーフレームができていると思います
Add KeyFrame

各キーフレームはコピーできるので、0.25秒経つごとに、交互に配置してください。
Add KeyFrame
アニメーションを再生すると、車が上下に小さく動いているのがわかると思います。
ループ再生もできるので、試してみてください。
Engine Start Animation

アニメーションは、位置の移動(Position)や、大きさの変更(Scale)、透明度(Opacity)など様々です。
もちろん要素自体の形を自由自在に変形させて動かしたり、Bone(骨組み)を設定して、実際に生きているかのような動きをさせることもできます。
ぜひ様々なアニメーション作成に挑戦してみてください。

完成形

Finish Animation

アニメーションのエクスポート

満足のいくアニメーションが完成したら、さっそくエクスポートしましょう。
左上のタブから共有のボタンを押して、Downroad、そして、For newest runtimeを選択してください。
Export Animation
すると任意のダウンロードフォルダにプロジェクト名.rivがダウンロードされています。
こちらのファイルをこれから、Webサイト上で使用していきます。

環境構築⚡

今回は、React×TypeScriptでRiveを使っていこうと思います。
Reactの環境構築はViteを使っていきます。
余談ですが、このViteというフロントエンドツール、環境の構築や、開発サーバーのスタート、Webアプリケーションのビルドなどが超高速で、TypeScriptなどのサポートも充実していて、とても魅力的なので、ぜひ調べて、使ってみてください。
https://ja.vitejs.dev/guide/why.html

  • npm
npm create vite@latest rive-sample-app --template react-ts
  • yarn
yarn create vite rive-sample-app --template react-ts

フォルダの整理

フォルダの構成はどうなのでもいいですが、自分はこうしておきます。
publicの中に今回、Riveで作成した、.rivファイルを追加しておきます。
Folder

Riveのアニメーションを使ってみよう！

Riveの導入

Riveの導入には二つのオプションがあります。(canvas,webgl)
今回は、canvasを使用します。WebGLバッキングレンダラーが必要な場合を除き、アプリでRiveを使用する場合は、canvasを使用して、迅速かつ高速に使用することが推奨されています。

  • npm
npm i --save @rive-app/react-canvas
  • yarn
yarn add @rive-app/react-canvas

コンポーネントの作成

componentsフォルダの中に、先ほど作成したアニメーションをレンダリングするコンポーネントを作成していきます。

components/Car/index.tsx
export const Car = () => {
  return (
    <div className="container">
      <></>
    </div>
  );
};

wrapの大きさは今回は表示できればいいので、Riveでプロジェクトを作成した時と同じ、500×500に固定しておきます。

components/Car/style.css
.container {
  width: 500px;
  height: 500px;
}

フックのuseRive()を使用してレンダリング

多くの場合、アニメーションをレンダリングするためのReactコンポーネントだけでなく、それを制御するRiveオブジェクトのインスタンスも必要になると思います。
useRive()はこの両方を提供します。
このフックはコンポーネントとriveオブジェクトを返し、現在のRiveファイルを制御できるようにします(RiveComponent)。

ただただ今回作成したものを表示するには、これだけで行けます。
App.tsxでCarコンポーネントを呼び出してください。

components/Car/index.tsx
import { useRive } from "@rive-app/react-canvas";
import "./style.css";

export const Car = () => {
  const { rive, RiveComponent } = useRive({
    src: "car.riv",
    autoplay: true,
    animations: "Advance",
  });

  return (
    <div className="container">
      <RiveComponent />
    </div>
  );
};

useRive()には様々なパラメータがあります。

  • srcは、再生するアニメーションの.rivファイルを指定します。
  • autoplayは、trueの場合、ロード時に自動的にアニメーションを再生します。
  • animationsは、作成したアニメーションの中からどのアニメーションを再生するかを指定します。
    これを"Engine Start"にすれば、私たちが作成した上下に動くアニメーションになるということです。

useRiveのパラメータについてはこちらを参考にしてください
https://help.rive.app/runtimes/overview/react/parameters-and-return-values#parameters

次のコマンドを実行して開発サーバーを起動してください。

yarn dev

  VITE v4.0.2  ready in 246 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

http://localhost:5173/にアクセスしてみてください。
問題なく再生できていますね！
Animation Play

アニメーションの制御

ここでは、アニメーションをボタンで制御してみようと思います。
そこで使用するのが、先ほどRiveComponentと一緒にuseRive()で呼び出した、riveです。
riveには、play(), pause(), stop()というメソッドがあります。
このメソッドを使って、再生と一時停止ができます。
再生するアニメーションの名前を渡すか、何も渡さなければ、インスタンス化されたすべてのアニメーションに影響します。

試しに超絶簡単なコードを書いてみましょう

components/Car/index.tsx
import { useRive } from "@rive-app/react-canvas";
import "./style.css";

export const Car = () => {
  const { rive, RiveComponent } = useRive({
    src: "car.riv",
  });

  const EngineStart = () => {
    rive?.play("Engine Start");
  };

  const Advance = () => {
    rive?.play("Advance");
  };

  const Pause = () => {
    rive?.pause();
  };

  return (
    <div>
      <div className="container">
        <RiveComponent />
      </div>

      <div>
        <button onClick={EngineStart}>Engine Start</button>
        <button onClick={Advance}>Advance</button>
        <button onClick={Pause}>Pause</button>
      </div>
    </div>
  );
};

こうすることで、
一つ目のボタンを押せば、Engine Startのアニメーションが、
二つ目のボタンを押せば、Advanceのアニメーションが再生され、
三つ目のボタンを押せば、今再生しているアニメーションを一時停止することができます。

https://youtu.be/FpAWaJYu2m4

アニメーションについてはこちらを参考にしてください。
https://help.rive.app/runtimes/playback

サウンド系のライブラリと組み合わせことで、エンジンが始動したらエンジン音を流したり、
車が止まった時に、ブレーキ音を出すといったことも制御して行うことができます。

まとめ

今回は、インタラクティブなアニメーションをWeb上で作成、エクスポートでき、自身のプロジェクト上にアニメーションを追加することのできる、「Rive」を紹介しました。

今回紹介した部分は、まだまだ、氷山の一角にすぎません。
ある値によって、要素が変化するといった、さらに細かくアニメーションを制御できる
State Machinesというものもあります。
この記事を読んで、面白そうだ、と少しでも興味を持った方がいましたら、ぜひ、Riveと検索して、いろいろと調べてみてください。

Riveを使用することで、ユーザーの入力状況や内容に応じたアニメーションの再生や、面白いローディング画面の実装、動きで人の目を魅了するものなどを作成することができます。
可能性は無限大です。
動かない画像に命を吹き込みましょう！

あなたのプロジェクトが華やかで輝くものになることを願っています。

最後に今回作成したプロジェクトのGitHubを張り付けておきます。
https://github.com/Makotty/rive-sample-app

この記事を読んでくださり、ありがとうございました！

JUNNI
JUNNIPublication

わたしたちジュニは、デジタル・テクノロジーと、デザインの力で今までにない新しい体験を創ります。アソビゴコロで、世界をハッピーに変えていく。それがわたしたちの理念です。

Discussion