Lottieでリッチなwebアニメーションを実装しよう
webでアニメーションを実装する場合、大抵はCSSを使用することになるでしょう。しかし近年ではアニメーションに求められるレベルもどんどん上がってきており、CSSのみでは実装が難しい複雑な表現も増えています。
Lottie はそんなアニメーション実装を手軽に行うアニメーションライブラリです
今回はその使い方を紹介したいと思います
Android、iOS、Web、アニメーションライブラリで、Airbnbが開発しています。拡張プラグインBodymovinを使用すれば、Adobe After Effectsで作成したアニメーションをjsonとしてエクスポートでき、モバイルおよびWeb上でアニメーションをレンダリングできます。 Lottieのメリット
マルチプラットフォームに対応。iOS、Android、Web、React NativeでLottieファイルを変更せずに利用できる。
SVGファイルで解像度を気にせずに拡大縮小が可能。
ファイルサイズが動画ファイルに比べて圧倒的に軽量。
アニメーションのホバー再生や逆再生、ループ機能などアニメーションを制御できるパラメーターも公開されている。
アニメーションを作成する
1. After Effects で アニメーション実装
2. アニメーションをjsonファイルで書き出し
ここはデザイナーさんの領分なので、今回は軽く説明します
※ 注意事項
json形式で書き出すときにはプラグインが必要です
サポートされていない表現があります
https://photoshopvip.net/wp-content/uploads/2020/03/lottie-supported-features-1-1.jpghttps://photoshopvip.net/wp-content/uploads/2020/03/lottie-supported-features-2-1.jpg
lottieファイルをプレビュー表示できます
Lottie アニメーションが大量に公開されているサイト
lottie-webで表示
code: javascript
var animation = bodymovin.loadAnimation({
container: document.getElementById('lottie'),
renderer: 'svg', // 描画形式
loop: true, // ループ再生するかどうか falseで１回だけ再生
autoplay: true, // 自動再生
path: 'data.json',
name: 'sample'
});
アニメーションインスタンスには様々なメソッドがあります
まとめ
エンジニア的には非常にありがたいと思います
アーティスティックなサイトを実装する際には一考の余地あり
参考サイト