Lottieで作成したアニメーションをサイトに組み込む機会があったので、実装方法をメモ。
設定方法
今回はアニメーション自体の作成ではなく、アニメーションをサイトに組み込む方法になるので、LottieFilesで公開されているアニメーションを使用してみます。
アカウント登録後に使用したいアニメーションを選択して、右上のDownload > Lottie JSON をクリックします。
アニメーションをサイトに組み込むためのプラグインを用意します。
インストール方法はいくつかありますが、今回はCDNを使用します。
1 |
アニメーションを組み込む要素を用意します。
1 | <div id="sample"></div> |
最後にJavaScriptの設定を行います。
1 2 3 4 5 6 7 | lottie.loadAnimation({ container: document.getElementById('sample'), // アニメーションを追加する要素 renderer: 'svg', // レンダリングのタイプ loop: true, // アニメーションをループさせるかどうか autoplay: true, // アニメーションを自動再生するかどうか path: 'data.json' // アニメーションのjsonファイルのパス}); |
これでLottieで作成したアニメーションをページに組み込むことができました。
Lottie組み込みのデモページ
コメントが承認されるまで時間がかかります。