After Effectsで作成したシェイプ アニメーションをweb実装出来るLottie-webを試してみる備忘録

作業工程動画

作業工程テキスト

1. Affter Effects に bodyMovin をインストール
2. Pacel を使ってブラウザ表示用のファイル作成
3. つまづきポイント
4. Code

1. Affter Effects に bodyMovin をインストール

lottie-webのリポジトリの README にいくつかのインストール方法の記載があるのでどれかの方法で AfterEffects に bodyMovin というエクステンションをインストールします。

オプション 1 がお勧めの方法になっていたのですが、Adobe creative cloud との同期に不具合があるとうまくインストールされませんでした、改善の方法が不明…（多分一回初期化した方が早そうなので後日やってみます）

なので、今回はオプション 3、当該リポジトリの lottie-web/build/extension/ 配下にある zxp ファイルをダウンロードして、ZXP installer からインストールしました。

インストールが完了したら、AffterEffects の環境設定で「スクリプトとエクスプレッション」内の「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れてください！チェックを忘れると JSON ファイルが空ファイルとして Export されるので注意してください。

2. Pacel を使ってブラウザ表示用のファイル作成

Parcelという設定不要な Web アプリケーションバンドラーを使用します。

npm でも yarn でも大きくは変わらないので好みでグルーバルインストールします。

yarn global add parcel-bundler

あとは Package.json を作成すればすぐローカル環境を作れるので楽ちんです。

yarn init -y

index.html というファイルをビルドしたければ以下のようにコマンド叩けばローカルサーバーが立ち上がります。

parcel index.html

あとは、必要なファイルを適切に作成してしていけばオッケーです。動画とサンプルの Github リポジトリを参考ください。

3. つまづきポイント

今回一番のつまづきポイントは、lottie-webのリポジトリの README に記載のあるサンプルコードが動かなかったところです。

該当箇所は

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: "svg",
  loop: true,
  autoplay: true,
  path: "data.json", // the path to the animation json
})

path: というプロパティで、こちらを animationData　に変更することでアニメーションが表示されました。

4. Code

今回作成したコードはこちらにありますのでご参考ください Github リポジトリ