JS で Lottie のアニメーションを表示する

検証用に触ってみた記録

完成形

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.2/lottie.min.js" type="text/javascript"></script>
<div></div>
<script>
  lottie.loadAnimation({
    container: document.querySelector('div'), // 表示領域
    path: './data.json', // ローカルに用意したLottieのJSONファイル
    renderer: 'svg', // 表示する方法 svg, canvas, htmlのいずれか
    loop: true, // ループさせるか
    autoplay: true, // 自動表示させるか
  }).setSpeed(2); // 2倍速で表示
</script>

jsonをサーバーから持ってくる場合はpathにhttps://assets2.lottiefiles.com/...から始まるjsonファイルを指定してあげればOK

Animation By Thomas Kiguru

Animation By Abdul Latif

KAWAII！！！！

思ったより簡単すぎてやることなかった・・・

今回はCDNでやってるけどnpmもあります

www.npmjs.com

アニメーション作れる人すごいなぁ〜〜〜〜

補足

これ書いてるときに見つけたんだけど埋め込みも用意されてるから JS すらいらないっぽい・・・すごいぜLottie・・・

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets2.lottiefiles.com/packages/lf20_WaQ8yMJuKt.json" background="transparent" speed="2" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>

参考

lottiefiles.com

github.com

lottiefiles.com