こんにちは、cssアニメーション大好き人間の@Nakazです。
Diverse Advent Calendar 2019 15日目の記事です。
はじめに
今回は、lottieを使う際に一番のキモである、JSONファイルを扱えなかった場合というとてもニッチなケースを書こうと思います。
※この記事はlottieの使い方をイチから書くわけではありません。ごめんなさい。
※なんでJSONが使えないんだ？と思うかもしれませんが「色々あって」使えなかったんです。。。
まずはJSONが使える時の使い方
lottie-webにもある通り、基本的にはAfterEffects+bodymovinで作ってもらったJSONを元に
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ファイルの中は
{"v":"5.4.4","fr":60,"ip":0,"op":120,"w":80,"h":80,...
のようになってます。これを
var animationdata = {"v":"5.4.4","fr":60,"ip":0,"op":120,"w":80,...
のように一旦格納して、jsファイルにリネームします。
※ファイル自体中身が巨大なので、極力外部にしたほうがいいです。
そしてその中身をscriptタグで読み込み受け取ってください。
import/requireの場合はそれに沿った記述で受け取ってください。
受け取ったObjectを再度JSON形式に変換してanimationDataに設定する
lottie.loadAnimation({
animationData: JSON.parse(JSON.stringify(animationdata)),
});
これで無事データを格納することができました。
最後に
少々回りくどい方法ではあるのですが、今のところこの方法で困ってはないのでよしとしてます。
うそ？！私の環境JSON使えないの？？
って時にこの記事に辿り着いてもらえたら僥倖です。