#(1)アニメーションをafterで作成
まずは素材作り。
で、ウィンドウ＞拡張機能＞bodymovin。
#(2)エラーが出るよー😂→環境設定でした😅
allow scripts to write files and access network
と出てしまう。エラーもかわいいわい！
なんのことはない！
スクリプトによるファイルへの書き込み〜にチェックが必要だったようです。
左の丸にチェックが入っておりかつ保存先を指定しないと
同様のウサギが出てきて注意されます。
で、data.jsonが吐き出されます。
#(3)lottieサイトで動作チェック
下記にdata.jsonをドラッグ・アンド・ドロップ。🍬
https://lottiefiles.com/preview
#(4)実装
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Lottie</title>
</head>
<body>
<h1>テストですわ</h1>
<div id="lottie"></div>
</body>
<script src="js/lottie.js" type="text/javascript"></script>
<script>lottie.loadAnimation({
container: document.getElementById('lottie'), // アニメーションをさせたいdivなどhtml要素ににつけた名前
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json' // 自分が書き出したjsonファイルの名前と場所（パス）を記述
});</script>
</html>
▼参考記事
https://note.mu/swcd/n/nb7bdb48e80ca#pJ64a
動かないよー！！😂の原因は
Uncaught TypeError: Cannot read property 'appendChild' of nullでした。
<div id="lottie"></div>
の前に
container: document.getElementById('lottie')
を書いちゃうと、lottieなんかないっすよー？
ってことで表示されなかったのですね。
▼参考記事(ありがとうございます。)
http://blog.netandfield.com/shar/2015/04/avascript.html
#(5)作成の際に気をつけること
うまく変換されない例
❌パーティクルなどのエフェクトを使用したアニメーション
❌画像を使用したアニメーション
❌イラストレーターaiデータのままのアニメーション
👉シェイプ化しないと駄目みたい、、涙