![見出し画像](https://assets.st-note.com/production/uploads/images/89240083/rectangle_large_type_2_8af4179a6d8ab22ef3bd7c3500ec3e6a.png?width=1200)
RiveをReactで動かしてみました
こんにちわ。nap5です。
RiveをReactで動かしてみましたので、紹介したいと思います。
Lottieと比較されているツイートとかも観測しました。
We recreated this Lottie animation in Rive.
— Guido Rosso (@guidorosso) October 12, 2022
Lottie file is 181.7 KB.
Rive file is 18 KB.
Lottie GPU memory: ~149 MB-190 MB
Rive GPU memory: 2.6 MB
Lottie JS heap: 16.9 MB
Rive JS heap: 7.3 MB
Lottie CPU: 91.8%
Rive CPU: 31.8% pic.twitter.com/y6TJkkeZSk
今回はドキュメントを参考にReactで動かしてみました。
デモコードです。
デモサイトです。
RiveコンテナDOMにある程度高さを持たせないと「表示されない!」などになりそうですね。
<RiveComponentPlayback className="min-h-[20rem] w-full" />
簡単ですが、以上です。
この記事が気に入ったらサポートをしてみませんか?