Zenn
🕺

AEで作ったアニメーションをLottieでお手軽にWebで使う

2023/01/21に公開
JavaScript
Lottie
tech

はじめに

Lottieって何？

Lottie（ロッティー）とは、Airbnbが開発している、アニメーションライブラリです。
Adobe After Effectsで作成したアニメーションを、拡張プラグイン「Bodymovin」を使ってjsonとしてエクスポートすることで、モバイルおよびWeb上で簡単にアニメーションを実装することができます。
▼公式サイト
https://airbnb.design/lottie/

メリット

  • SVGファイルなので高い解像度を保ったまま、サイズの拡大・縮小ができる
  • JSONファイルを使っているので、GIFやMP4よりもファイルが軽い
  • 高品質のシェイプアニメーションを実現できる
  • JavaScriptで再生のタイミングや逆再生などの制御ができる

使うときの注意事項

  • 何でも表現できるわけではない (グラデーションなど）
    できること・できないことはこちらから
  • そもそもAfterEffectsの基礎知識が必要
    AEできない！という人はLottieFilesでダウンロードするのも手です

Webサイトにアニメーションを実装するまでの流れ

今回はこちらの人の部分のアニメーションを例に説明します。

  1. ZXPInstallerをインストール
  2. 拡張プラグイン「Bodymovin」をインストール
  3. Illustratorでアニメーションのための素材をAiファイルを作成
  4. After Effectsでアニメーションを作成
  5. 作成したアニメーションをBodymovinを使ってJSONファイルで書き出し
  6. 作成したJSONファイルをプレビュー
  7. Webサイトやアプリに実装

1. ZXPInstallerをインストール

拡張プラグイン「Bodymovin」をインストールするために、ZXPInstallerをダウンロード・インストールします。
（「Bodymovin」はZXP形式ファイルなので）
https://aescripts.com/learn/zxp-installer/

2. 拡張プラグイン「Bodymovin」をインストール

① 「Bodymovin」をダウンロードする

https://github.com/airbnb/lottie-web/blob/master/build/extension/bodymovin.zxp

② ZXPInstallerを開き、bodymovin.zxpをドラッグ＆ドロップでウィンドウに移動し、インストールする

③ After Effects を開き、メインメニューのウィンドウ>エクステンションで「Bodymovin」が追加されているのを確認する

3. Illustratorでアニメーションのための素材をAiファイルを作成

動かしたいパーツごとにレイヤーを分けた素材を作成し、AIファイルとして保存する。

今回はこちらのイラストを動かしていきます。
動かしたいパーツが色々あるので、全部で34レイヤーに。
個人的にレイヤー名に番号を振っておくと、後でAfter Effectsで扱うときに楽でした！

4. After Effectsでアニメーションを作成

After Effectsでアニメーションを作成する。
ここは詳しくは解説しないので、各自で調べましょう。

5. 作成したアニメーションをBodymovinを使ってJSONファイルで書き出し

① メインメニューのウィンドウ>エクステンションから「Bodymovin」を選択する


②After Effectsの設定を変更

③書き出しの設定をする

書き出したいコンポジションを選択

　　
「・・・」をクリックして書き出し場所を指定

　　
書き出しの設定をする

　　
GlyphsとStandardを選択（用途に合わせて要調整）

④Renderをクリックして書き出し

6. 作成したJSONファイルをプレビュー

書き出したJSONファイルを下記サイトでプレビューして確認する
https://app.lottiefiles.com/preview

7. Webサイトやアプリに実装

Lottieでアニメーション表示させるのに必要なもの

今回の解説では以下のようなファイル構成で

├─ index.html
├─ js
│  ├─ main.js
│  └─lottie.min.js
└─ animation
   └─ data.json

index.html

index.html
<script src="js/lottie.min.js"></script>
<script src="js/main.js"></script>

<body>
  <div id="lottie" class="l-animation"></div>
</body>

main.js

main.js
document.addEventListener("DOMContentLoaded", function(){
   const animation = bodymovin.loadAnimation({
    container: document.getElementById('lottie'), //index.htmlで指定したid
    renderer: 'svg', // 描画形式
    loop: true, // true→ループ/false→1回
    autoplay: true, // 自動再生
    path: '/animation/data.json', // jsonのパスを指定
  });
});

▼より詳しい使い方やメソッドはこちら
https://github.com/airbnb/lottie-web

さいごに

簡単に使えるので、応用したりうまく使って"Happy Lottie Life"を！

Discussion