ずっとやってみたくてやってみたくてやってなかったLottieを使ったSVGアニメーション。
一通りやってみたので備忘録。
いるもの
◎After Effects
◎ZXP Installer（bodymovinをインストールするためのアプリ。win、Mac有）
◎bodymovin（AEの拡張機能）
◎Lottie（bodymovinで吐き出したjsonを表示するためのライブラリ）
（1）After Effectsでアニメーションを作る
アニメーションの方法は膨大なので割愛。
（2）ZXP Installerをインストール
（3）bodymovin、Lottieをインストール
使うファイル2点
・bodymovin
lottie-web-master/build/extension/bodymovin.zxp
・Lottie
lottie-web-master/build/player/lottie.min.js
（4）bodymovin.zxp を ZXP Installerで解凍
・ZXP Installerにbodymovin.zxpをドラッグ&ドロップで解凍
・AEの環境設定→一般設定→スクリプトとエクスプレッション→「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」をチェック
・AEのウィンドウ→エクステンション→bodymovinをチェック
AEの画面にbodymovinウィンドウが表示される
（5）AFで作ったアニメーションをbodymovinを使ってjsonで吐き出す
・AEの画面に表示されたbodymovinウィンドウ内で吐き出したいアニメーションを選択
・保存先を指定
・Render
（6）lottie.min.jsを読み込んで表示
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Lottie</title>
</head>
<style>
#lottie{
width: 50%;
margin:30px auto;
}
</style>
<body>
<div id="lottie"></div>
</body>
<script src="js/lottie.min.js" type="text/javascript"></script>
<script>
const anim = lottie.loadAnimation({
container: document.getElementById('lottie'),//表示したい場所のID
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json'//吐き出したjsonのパス
});
</script>
</html>
できた
やっとさわれた！
jsonを表示させる云々よりアニメーションのセンスがいるみたいです
今日のひとこと
寒暖差が激しい