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>

できた

DEMO

やっとさわれた!
jsonを表示させる云々よりアニメーションのセンスがいるみたいです

今日のひとこと

寒暖差が激しい

Blogs List

CONTACT

当事務所にご関心をお持ちいただきまして、ありがとうございます。
お仕事に関するご相談は下記よりお問い合わせください。

© Copyright 2020 NIAR All rights reserved.