
5枚のスライドで紹介するページはこちら。
Web上でLottieアニメーションを再生するためのJavaScriptライブラリは、airbnbの公式ドキュメントによれば2つの種類が存在します。
Bodymovinを使った方法
Bodymovinライブラリを使ったコードは以下のようなものになります。
<div class="lottie"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.11.0/lottie.min.js"></script>
<script>
bodymovin.loadAnimation({
container: document.querySelector('.lottie'),
renderer: 'svg',
loop: true,
autoplay: true,
path: '../images/lottie.json'
});
</script>
Lottie-webを使った方法
<div class="lottie"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.11.0/lottie.min.js"></script>
<script>
lottie.loadAnimation({
container: document.querySelector('.lottie'),
renderer: 'svg',
loop: true,
autoplay: true,
path: '../images/lottie.json'
});
</script>
どちらでもLottieを再生できます
結論
Lottie-webは、Bodymovinの後継バージョンであり、Bodymovinの機能をすべて継承し、バグ修正やパフォーマンス向上が行われています。
基本的にはLottie-webライブラリを使った記述で問題ありません。