3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

#背景
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の名前を指定します。
これは公式ドキュメントをよくよく見てみると見つかります。

参考

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

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?