3ヶ月前に投稿

Lottie Animation を表示 (Bodymovin編)

2021年1月12日

この記事は約 2 分で読めます。

4.5

以前、
Lottie playerを使って
アニメーションを表示
」という
記事をご紹介いたしましたが、
今日は
bodymovin というライブラリで
Lottie Animation を表示させます。

Bodymovinは、
Web上でLottie JSONファイルを
レンダリングできます。

まず、
bodymovin の
javascript ライブラリをCDNから入手します。

CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.5/lottie.min.js" integrity="sha512-0bCDSnaX8FOD9Mq8WbHcDwshXwCB5V4EP+UBu87WQgga2b7lAsuEbaSmIZjH/XEmNhJuhrPbFHemre5HZwrk9w==" crossorigin="anonymous"></script>
JavaScript
var animation = bodymovin.loadAnimation({
  container: document.getElementById('root_1'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json'
});

アニメーションファイルは
LottieFiles から入手します。

HTML
<div id="root_1"></div>
CSS
#root_1 {
  width: 300px;
  height: 300px;
  cursor: pointer;
}
結果

Embed Lottie animations on your website.
Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web!

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

Lottie Animation を表示 (Bodymovin編)