JSONファイルが使えない！そんな環境下でのlottie

こんにちは、cssアニメーション大好き人間の@Nakazです。
Diverse Advent Calendar 2019 15日目の記事です。

はじめに

今回は、lottieを使う際に一番のキモである、JSONファイルを扱えなかった場合というとてもニッチなケースを書こうと思います。
※この記事はlottieの使い方をイチから書くわけではありません。ごめんなさい。
※なんでJSONが使えないんだ？と思うかもしれませんが「色々あって」使えなかったんです。。。

まずはJSONが使える時の使い方

lottie-webにもある通り、基本的にはAfterEffects+bodymovinで作ってもらったJSONを元に

lotti.js

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  path: 'data.json' // the path to the animation json
});

細かいオプション設定はありますが、基本的にはpathの部分にJSONファイルを設定するだけです。
カンタンですね。

でもJSONが使えない

じゃぁどうすんの？使えないの？ってなりそうなのですがそこはちゃんと用意されてます。
それが

animationData: an Object with the exported animation data

エクスポートされたアニメーションデータを持つオブジェクト

というpathの代わりにデータを受け取れるオプションです。

で、どうすんのさ？

結論から話すと

1. エクスポートされたJSONを一旦Objectとして受け取る
2. 受け取ったObjectを再度JSON形式に変換してanimationDataに設定する

です。

エクスポートされたJSONを一旦Objectとして受け取る

やってることは単純で、エクスポートされたJSONファイルの中は

export.json

{"v":"5.4.4","fr":60,"ip":0,"op":120,"w":80,"h":80,...

のようになってます。これを

export.js

var animationdata = {"v":"5.4.4","fr":60,"ip":0,"op":120,"w":80,...

のように一旦格納して、jsファイルにリネームします。
※ファイル自体中身が巨大なので、極力外部にしたほうがいいです。

そしてその中身をscriptタグで読み込み受け取ってください。
import/requireの場合はそれに沿った記述で受け取ってください。

受け取ったObjectを再度JSON形式に変換してanimationDataに設定する

sample.js

lottie.loadAnimation({
  animationData: JSON.parse(JSON.stringify(animationdata)),
});

これで無事データを格納することができました。

最後に

少々回りくどい方法ではあるのですが、今のところこの方法で困ってはないのでよしとしてます。

うそ？！私の環境JSON使えないの？？

って時にこの記事に辿り着いてもらえたら僥倖です。