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

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

• Adobe Add-ons Bodymovin

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

1. After Effectsの拡張機能インストールのため、下記よりZXP Installerをダウンロード・インストールします。
   ZXP Installer
   
   
   
2. githubのリポジトリからファイルをダウンロードし、「build ＞ extension ＞ bodymovin.zxp」をZXPInstallerにドラック＆ドロップ。
   
   
   

After EffectsからJSONの書き出し

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

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

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

サポートされている機能（一部）

• プリコンポーズ
• シェイプ（矩形、楕円、星型）、テキスト
• ヌルオブジェクトレイヤー
• マスク
• パスのトリミング
• タイムリマップ
• ブレンドモード（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 Wiki
• AfterEffectsで作成したアニメーションをJSONで書き出してみた
• Lottie
• LottieFiles

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

雑感

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