COPYRIGHT © SONICJAM ALL RIGHTS RESERVED.
2017
20
FEB
CATEGORY:
デザイナーの独り言
AfterEffectsで作成したアニメーションをJSONで書き出してみた
みなさまこんにちは!デザイナーの平井です。
最近、映像案件でモーショングラフィックス制作の相談が増えてきている弊社ですが、 AfterEffectsで作ったアニメーションをJSONファイルとして書き出し、SVGで描画できるプラグインがあるとの情報が!

Bodymovin
https://github.com/bodymovin/bodymovin

Adobe Animate CCを使ったスプライトアニメーションなど、ブラウザ上にアニメーションを実装する手法はいくつかありますが、 AfterEffectsを用いたモーショングラフィックス制作を得意としている自分としては非常に興味深い...!
ということで、今回はこの「Bodymovin」を使ってブラウザ上にアニメーションを実装してみました。
※Adobe AfterEffects CC2014以降のみサポートとのこと


前準備

01.jpg
・AfterEffectsプラグイン「Bodymovin」をインストール
こちらからプラグインをインストールします。
https://goo.gl/uVKfGS


※CC2017の場合は以下の手順が必要とのこと
https://github.com/bodymovin/bodymovin
上記URLからファイルをダウンロードします。

02.jpg
http://aescripts.com/learn/zxp-installer/
※プラグインのインストールに使うので、ZXPインストーラーも入手します。

ダウンロードしたbodymovin-master.zipを解凍したら、
bodymovin-master/build/extension
の中にあるbodymovin.zxpをZXPインストーラーにドラッグ&ドロップします。
以上でプラグインのインストールは完了です。


JSONファイルを書き出す

03.jpg
AfterEffectsでアニメーションを作成します。
アニメーション作成手順について本記事では割愛しますが、以下注意点がいくつか。

  • できないこと
  • ・画像ファイルは書き出せない
  • ・ポストエフェクト(レンズフレア効果等)は適応されない

  • ※ベクターデータをSVGに変換して読み込まれる仕様になっているため、現状では画像を使った表現はできないようです。

  • できること
  • ・ベクターデータの拡大縮小、透明度のコントロール
  • ・マスクアニメーション
  • ・パスのトリミング(線が伸びていくような表現等)
  • ・グラデーションの塗り


書き出し設定
04.jpg
書き出したいデータを選択、RENDERをクリックし、アニメーションを書き出します。 書き出し設定は以下の通り。

05.jpg
指定したディレクトリにファイルが生成されていればOKです。今回は動作確認用デモファイルを書き出す設定にしているので、JSONファイルとhtmlファイルが生成されているはずです。


成果物

gif01.gif
http://shujihirai.com/bm01/
イージングなど、AfterEffectsで作った動きが忠実に再現されています。 これくらいであればスマホでも問題なく動作しますね!

gif02.gif
http://shujihirai.com/bm02/
こちらはパスのデータが多いためなのか、動作がすこし重たいです...。 このあたりはエンジニアと相談になってきそうです。

http://codepen.io/airnan/
この他にもCODEPENで様々なサンプルが公開されているようなので、要チェックですね。


まとめ

まだまだ試せていない部分もありますが、制限内の表現は問題なくブラウザ上に描画されることが分かりました。 弊社エンジニアにも見せてみたところ、ページローディングのアニメーション等がもっと自由になりそう!との声が。
今まではエンジニアにsvgのデータを渡してアニメーションを実装してもらっていたところを、 今後はデザイナーが動きをつけた状態で渡すことが可能になりそうです。うまくすれば工数の削減にも繋がるのでは...!

CATEGORY

×
CATEGORY
COPYRIGHT © SONICJAM ALL RIGHTS RESERVED.