WebアニメーションはRiveが便利！
みなさんは、Web アニメーション使っていますか？
おそらくLottieを使っている人が多いかと思います。
ただ、Lottieには大きな問題がありますね？
そうです。
Adobe の After Effects（AE）がないとアニメーションが作れないという問題です。
たくさんの人たちが嘆き苦しみながら AE を使うために Adobe に課金している事だと思います。
そんな人々を救うため、
最近では AE を使わなくてもアニメーションを作れるようにとLottie Labというサービスが開発されていたりします。
しかし、まだまだ公開には至っていない状態です。（2022/12/07 現在）
そこで、Rive 登場
AE で行っていたアニメーションの作成から、書き出しまで全て Web 上で完結できるサービスです。
今回は、アニメーションの設定から React で動かすまでをやってみたいと思います！
一応、Github 置いておきます
早速使ってみる
新規ファイルを作成
画面右上にあるNew Fileを選択後、
Black artboardになっていることを確認しCreateをクリックすると
このようなエディタが表示されたと思います！
SVG 画像を持ってくる
unDraw から SVG 画像を使わせて頂きます！
適当なものを DL したら、
エディタ上にドラッグ&ドロップしましょう！
そしたら、assets の方に入っていると思うので
またしても、ドラック&ドロップしてアートボード内に持っていきます！
各 path を別々に操作することが可能です！
アニメーションをつける
早速この犬の画像を動かしていきましょう！
右上からAnimateモードに切り替え、
左下にあるTimeline1を選択して、画面下部に Timeline を表示します
AE と同じようにキーフレームを打ってみると....
しっぽが動きました！！
アニメーションの作り方に関しては、公式からチュートリアル、ドキュメントがあるので見てみてください！
（みてるだけでワクワクする）
riv ファイルを取得する
Download→For newest runtimeをクリックして riv ファイルをダウンロードしましょう！
ちなみに、初期はnew fileになっているので
ファイル名変更しとくと[file name].rivが DL できます
React で動かしてみる
React アプリを Create
まずは、ちょちょいと React アプリを生成します
npx create-react-app rive-dog-animation --template typescript
...
Happy hacking!
@rive-app/react-canvas を install
Rive のアニメーションを再生するのに必要なプラグインが公式から出ているのでインストールします
npm i --save @rive-app/react-canvas
riv ファイルを public へ
先ほど DL した riv ファイルを public へつっこみましょう！
hooks を使って描画する
とりあえず、App.tsx を書き換えます。
import { useRive } from "@rive-app/react-canvas";
function App() {
const { RiveComponent } = useRive({
src: "dog.riv",
autoplay: true,
});
return (
<div style={{ width: "500px", height: "500px" }}>
<RiveComponent />
</div>
);
}
div にwidthとheightを入れているのは、RiveComponent が親要素に fit するように描画されるため指定しています。
fit 方法も、CoverやFillなどいろいろ選べます！
動作確認
npm startをしてhttp://localhost:3000/を見てみると....
元気よく動いていますね！（可動部分ふやしてみました！
まとめ
Rive 一本だけで web で動作するところまでいけるのは本当にすごいですよね！
昨日見つけてテンション上がりまくり太郎でした！
別の作業しながらでしたが、
見つけでドキュメントを読んでから React で動かすまで約 1 時間で出来、Lottie と比べても学習コストはだいぶ低いと思います！
みなさんも是非、遊んでみてください！
Discussion