Lottieを使用してアニメーションを実装したい

Lottieとは？

Airbnbが開発したモーショングラフィックスを扱うためのライブラリのこと。
After EffectsやLottieFiles、Lottielabで作成したアニメーションを、Webやモバイルアプリケーションに埋め込むためのツールとして利用される。

実装ではAfter EffectsやLottieFilesで書き出したjsonファイルを使用する

▼公式
https://airbnb.design/lottie/

たかなみ

Webサイト・アプリに実装

▼必要なもの

lottie.js ライブラリの読み込み
アニメーションを書き出ししたjsonファイル

たかなみ

実装コード

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js" integrity="sha512-jEnuDt6jfecCjthQAJ+ed0MTVA++5ZKmlUcmDGBv2vUI/REn6FuIdixLNnQT+vKusE2hhTk2is3cFvv5wA+Sgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

→ライブラリを読み込みます

index.html

<div class="hoge"></div>

→アニメーションを表示したいDOM要素を用意します

script.js

const hoge = document.querySelector(".hoge"); //アニメーションを表示するDOM要素
lottie.loadAnimation({
	container: hoge, // アニメーションを表示するDOM要素
	renderer: "svg",
	loop: true,
	autoplay: true,
	path: "./path/to/hoge.json", // JSONファイルのパス
});

▼より詳しい使い方やメソッドはこちら

たかなみ

After Effectsでlottie用のjsonファイルを書き出す方法

手順

「Bodymovin」プラグインをインストール
アニメーションを作成
「Bodymovin」プラグインを使用してjsonを書き出す

Bodymovinプラグインのインストール方法

いくつか方法がある。adobeCCからインストールする方法が手っ取り早くて楽。
その他の方法は公式のReadmeに載ってる

Bodymobinプラグイン使用時の注意点

▼下記の設定を必ず行うこと
Adobe After Effects > 環境設定 > スクリプトとエクスプレッション... > に移動し、「スクリプトによるファイルの書き込みとネットワークへのアクセスを許可する」にチェックを入れる

書き出し方法

ウィンドウ > エクステンション > 「Bodymovin」から書き出しする。

jsonとして書き出すコンポジションを選択
[...]から書き出し先を選ぶ
[Render]で書き出し実行する

たかなみ

参考記事

https://necco.inc/note/7370