【WEB】lottie.jsをローカルで動かす

背景

SVG+JSONでサクサク軽量アニメーションを実装できるlottie.js。

検索でパッと出てくるHow to サイトに載っている方法だと、JSONの読み込みの都合上、サーバー上じゃないと動作しません。
ローカルで動かす要件があった時にちょっと悩んだので、その方法をメモしておきます。
AEなどでのアニメーションJSON吐き出しは終わっている前提とします。

手順

まずはプラグイン類を読み込む

こんな感じのフォルダ構成としましょう。
CDNでももちろんOKですが、今回はローカルで完結させたいのでjQuery本体とlottie.jsはダウンロードしてきたものを読み込むとします。

.
├── index.html
└── assets
    ├── js 
    |   ├── jquery-3.6.0.min.js
    |   └── lottie.js
    └── json
        └── animation.json

index.html

<script src="./assets/js/jquery-3.6.0.min.js"></script> <!-- jQuery本体のパス -->
<script src="./assets/js/lottie.js"></script> <!-- lottie.jsのパス-->

JSONをjsに書き換える

ここがポイントです。吐き出したアニメーションJSONをテキストエディタで開きます。
なんかカッコで囲まれた文字列がダーってなってますね。

animation.json

{"assets":[{"id":"comp_1","layers":[{"d" // ...略 }

この文字列を、var dataって形でjsのvarにします。
そしてanimation.jsって名前で保存しましょう。

animation.js

var data =  {"assets":[{"id":"comp_1","layers":[{"d" /* ...略 */ }

jsに書き換えたJSONを読み込む

先ほど保存したanimation.jsをindex.htmlで読み込みます。

index.html

<script src="./assets/js/jquery-3.6.0.min.js"></script> <!-- jQuery本体のパス -->
<script src="./assets/js/lottie.js"></script> <!-- lottie.jsのパス-->
<script src="./assets/json/animation.js"></script> <!--  animation.jsのパス-->

lottie.jsを実行するコードを書く

index.htmlの、jsを読み込んでるコード類の下でもいいし、新たにjsファイルを用意してもいいでしょう。
下記のJavascriptを記述します。

index.html

<div id="anim-target"></div> <!-- アニメーションさせたい要素を作っておく -->

<script src="./assets/js/jquery-3.6.0.min.js"></script> <!-- jQuery本体のパス -->
<script src="./assets/js/lottie.js"></script> <!-- lottie.jsのパス-->
<script src="./assets/json/animation.js"></script> <!--  animation.jsのパス-->
<script>
 var animation = lottie.loadAnimation({
        container: document.getElementById('anim-target'), //アニメーションさせたい要素のid
        renderer: 'svg', // この辺りのoptionは用途に合わせて！
        loop: true,
        autoplay: true,
        animationData: data //参照するアニメーションのvarの名前
    });
</script>

よく落ちてるexampleでは、オプションのpathって項目でJSONのパスを指定しますが、ローカルで動かす場合はanimationDataって項目でvarの名前を指定します。
これは公式ドキュメントをよくよく見てみると見つかります。

参考

同じことで悩んでる先人がいました。