Adobe After EffectsとbodymovinでSVGアニメーションの作成を試してみる

  • 4
    いいね
  • 0
    コメント

After Effects Add-onのインストール

addons.png

Adobe After Effects CC 2017の場合は下記の手順

  1. After Effectsの拡張機能インストールのため、下記よりZXP Installerをダウンロード・インストールします。
    ZXP Installer
    zxpinstaller.png

  2. githubのリポジトリからファイルをダウンロードし、「build > extension > bodymovin.zxp」をZXPInstallerにドラック&ドロップ。

    github.com_bodymovin.png

After EffectsからJSONの書き出し

アニメーションを作成したのち、「ウインドウ > 拡張機能」から「Bodymovin」を選択し、ウインドウを開きます。

ae1.png

作成したコンポジションを選択して「Render」を押すと↓こんなのが出たので、

ae2.png

「編集 > 環境設定 > 一般設定」内の「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れますと、無事JSONファイルが書き出されました。

ae3.png

サポートされている機能(一部)

  • プリコンポーズ
  • シェイプ(矩形、楕円、星型)、テキスト
  • ヌルオブジェクトレイヤー
  • マスク
  • パスのトリミング
  • タイムリマップ
  • ブレンドモード(IE、Edgeを除く)

サポートされていない機能(一部)

  • 画像のシーケンス
  • ビデオ、オーディオ
  • レイヤーの時間伸縮
  • 3Dレイヤー

実装

<div id="bodymovin"></div>

に出力する場合、

<script src="bodymovin.js"></script>

<script>
var animData = {
    wrapper: document.getElementById('bodymovin'),
    animType: 'svg',
    loop: true,
    prerender: true,
    autoplay: true,
    path: 'data.json'
};
var anim = bodymovin.loadAnimation(animData);
</script>

というような形で出力します。

JSONデータを取得する際のクロスドメイン制約のため、ブラウザでの確認はローカルデータではなく、XAMPPなどに乗っけて行います。

参考

bodymovinをベースにAirbnbが開発しているSVGアニメーション用ライブラリ。
「LottieFiles」にはサンプルが豊富に掲載されており、それぞれJSONデータのダウンロードが可能。

雑感

After Effects上でのデータ作成に多少コツ(サポート外の機能の把握など)が必要ではありますが、実装自体はライブラリ丸投げで非常に簡便です。ただし、After Effectsの習得の方が大きな問題かも……