【React】たった10分でお洒落なアニメーションを実装する
今回は React でお洒落なアニメーションを手軽に実装する方法をまとめました。
実装にあたり、Airbnb が提供している Lottie というものを使用します。
JavaScript スタイルガイドを公開している Airbnb はフロントエンドエンジニア界隈ではかなり有名ですよね。次のセクションでは Lottie に関してもう少し深堀りしていきます。
Lottie とは
Web、iOS、Android に対応したライブラリです。Web アプリ だけでなく、ネイティブアプリでも使用できるのはとても魅力的ですね！React Native でも使用できるのは個人的に嬉しい所です。
Adobe After Effects で作成したアニメーションを Bodymovin というプラグインで JSON データとして書き出し、その JSON ファイルを Lottie が解析して、モバイルや Web 上にレンダリングするという仕組みです。SVG 形式で描画することができるので、GIF アニメーションなど他の形式と比較すると、軽量で解像度が高い状態を実現できます。
ここまでの内容をご覧いただいいて「アニメーション作成も含めたら 10 分で実装できるはずがない！タイトル詐欺だ！！」と思われた方もいらっしゃるかと思います。確かにアニメーションを 1 から作成した場合は厳しいですね。しかし、LottieFiles というサイトで多くのアニメーションが公開・共有されています。一部有料のものもありますが、無料で使用できるものがほとんどです。今回はこちらで公開されているアニメーションを使用します。
無料で公開されているアニメーションを試してみる!
今回は React 用ライブラリである react-lottie を使用しました。詳細な実装方法に関しては割愛しますが、ドキュメントを参考に進めれば特に詰まる箇所はないかと思います。props が豊富で自動再生や無限ループなどの制御が可能です。複数ページで使用する場合はコンポーネント化しておきましょう！(1 ページ内でアニメーションを複数使用するのは NG です)
ド派手なものから、Zenn や Twitter のいいねの様なアニメーションまで幅広く実装可能です！
最後に
今回は React でお洒落なアニメーションを手軽に実装する方法をまとめました。
公式によると Lottie は Google Home や Uber Eats でも使用されているみたいです！
10 分程度で実装できると思いますので、気になる方は是非試してみてください！
Discussion