After effect〜json吐き出し、LottieでWebページでのアニメーション表現までの流れをやってみた

BLOG
知る。残す。伝える。

2019.11.18
SVG animation

After effect〜json吐き出し、LottieでWebページでのアニメーション表現までの流れをやってみた

ずっとやってみたくてやってみたくてやってなかったLottieを使ったSVGアニメーション。
一通りやってみたので備忘録。

いるもの

◎After Effects
◎ZXP Installer（bodymovinをインストールするためのアプリ。win、Mac有）
◎bodymovin（AEの拡張機能）
◎Lottie（bodymovinで吐き出したjsonを表示するためのライブラリ）

（1）After Effectsでアニメーションを作る

アニメーションの方法は膨大なので割愛。

（2）ZXP Installerをインストール

ZXP Installer

（3）bodymovin、Lottieをインストール

lottie-web

使うファイル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>