Zenn
Open5

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

After Effects
JavaScript
Lottie
たかなみたかなみ

Lottieとは？

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

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

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

たかなみたかなみ

Webサイト・アプリに実装

▼必要なもの

  1. lottie.js ライブラリの読み込み
  2. アニメーションを書き出しした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ファイルのパス
});

▼より詳しい使い方やメソッドはこちら
https://github.com/airbnb/lottie-web?tab=readme-ov-file#how-it-works

たかなみたかなみ

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

手順

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

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

いくつか方法がある。adobeCCからインストールする方法が手っ取り早くて楽。
その他の方法は公式のReadmeに載ってる
https://exchange.adobe.com/apps/cc/12557

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

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

書き出し方法

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

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