
AfterEffectsで作成したアニメーションをJSONで書き出してみた
みなさまこんにちは!SONICJAM.studioの平井です。
最近、映像案件でモーショングラフィックス制作の相談が増えてきている弊社ですが、 AfterEffectsで作ったアニメーションをJSONファイルとして書き出し、SVGで描画できるプラグインがあるとの情報が!
Bodymovin
https://github.com/bodymovin/bodymovin
Adobe Animate CCを使ったスプライトアニメーションなど、ブラウザ上にアニメーションを実装する手法はいくつかありますが、 AfterEffectsを用いたモーショングラフィックス制作を得意としている自分としては非常に興味深い...!
ということで、今回はこの「Bodymovin」を使ってブラウザ上にアニメーションを実装してみました。
※Adobe AfterEffects CC2014以降のみサポートとのこと
前準備
・AfterEffectsプラグイン「Bodymovin」をインストール
こちらからプラグインをインストールします。
https://goo.gl/uVKfGS
※CC2017の場合は以下の手順が必要とのこと
https://github.com/bodymovin/bodymovin
上記URLからファイルをダウンロードします。
http://aescripts.com/learn/zxp-installer/
※プラグインのインストールに使うので、ZXPインストーラーも入手します。
ダウンロードしたbodymovin-master.zipを解凍したら、
bodymovin-master/build/extension
の中にあるbodymovin.zxpをZXPインストーラーにドラッグ&ドロップします。
以上でプラグインのインストールは完了です。
JSONファイルを書き出す
AfterEffectsでアニメーションを作成します。
アニメーション作成手順について本記事では割愛しますが、以下注意点がいくつか。
できないこと
・画像ファイルは書き出せない
・ポストエフェクト(レンズフレア効果等)は適応されない
※ベクターデータをSVGに変換して読み込まれる仕様になっているため、現状では画像を使った表現はできないようです。
できること
・ベクターデータの拡大縮小、透明度のコントロール
・マスクアニメーション
・パスのトリミング(線が伸びていくような表現等)
・グラデーションの塗り
書き出し設定
書き出したいデータを選択、RENDERをクリックし、アニメーションを書き出します。 書き出し設定は以下の通り。
指定したディレクトリにファイルが生成されていればOKです。今回は動作確認用デモファイルを書き出す設定にしているので、JSONファイルとhtmlファイルが生成されているはずです。
成果物
sample
イージングなど、AfterEffectsで作った動きが忠実に再現されています。 これくらいであればスマホでも問題なく動作しますね!
sample
こちらはパスのデータが多いためなのか、動作がすこし重たいです...。 このあたりはエンジニアと相談になってきそうです。
http://codepen.io/airnan/
この他にもCODEPENで様々なサンプルが公開されているようなので、要チェックですね。
まとめ
まだまだ試せていない部分もありますが、制限内の表現は問題なくブラウザ上に描画されることが分かりました。 弊社エンジニアにも見せてみたところ、ページローディングのアニメーション等がもっと自由になりそう!との声が。
今まではエンジニアにsvgのデータを渡してアニメーションを実装してもらっていたところを、 今後はデザイナーが動きをつけた状態で渡すことが可能になりそうです。うまくすれば工数の削減にも繋がるのでは...!