Lottieで作ったアニメーションをWebサイトで実装（レスポンシブ対応）
Lottieでjsonファイルとして書き出されたアニメーションをWebサイトで表示させてみたいと思います。
After Effectsでjson形式で書き出すまでの記事やスマホアプリに組み込む記事はちらほらあったのですが、webで表示させるための手順はあまりなかったので実際にWebページで実装してみたいと思います。
といっても、もうできあがっているアニメーションを表示させるだけなので難しいことはありませんでした。
After Effectsでjson形式で書き出すまではこちらの記事をご覧ください。
【After Effectsで手軽にWeb用アニメーション】Lottieを使えるようにするまで – インストール編
【After Effectsで手軽にWebアニメーション】Lottieを使えるようにするまで – 制作編
ファイルを用意する
html
index.html（名前は任意）
なんといってもweb上に表示させるためにはこれがなくては始まりません。
js
lottie.jsまたはlottie.min.js
After Effectsで書き出したjsonファイルをアニメーションさせるためのライブラリ。
こちらからダウンロードできます。
https://github.com/airbnb/lottie-web/tree/master/build/player
json
data.json（名前は任意）
After Effectsで書き出したjsonファイル。
今回のデモではjQueryとcssも使いますが、最低限これだけあればWeb上でアニメーションを実装することができます。
せっかくなのでJason Mrazの「I Won’t Give Up」を聞きます。
名曲です。
コードを書く
html
|
1 |
<div id="tivel"></div> |
アニメーションを表示させるためにid名をつけた空の要素を作ります。
js
|
1 2 3 4 5 6 7 |
var animationTivel = lottie.loadAnimation({ container: document.getElementById('tivel'), renderer: 'svg', loop: true, autoplay: true, path: 'json/data.json' }); |
2行目：上のhtmlでつけたid名の中にjsonデータが読み込まれます。
6行目：読み込むjsonファイルまでのパスを指定します。
「loop」や「autoplay」などのオプションをいじれば色々できそうですね。
json
書き出されたjsonファイルを任意のディレクトリにアップします。
デモ
実際の動きはこちらになります。
レスポンシブ対応したものとクリックでアニメーションが発火するものも用意してみました。
まとめ
jsと組み合わせるとちょっとリッチなページが作れそうですね。
by N
