フォローしましたみなさまこんにちは!SONICJAM.studioの平井です。AfterEffectsを用いたモーショングラフィックス制作を得意としている自分としては非常に興味深い...!ということで、今回はこの「Bodymovin」を使ってブラウザ上にアニメーションを実装してみました。・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で様々なサンプルが公開されているようなので、要チェックですね。まとめまだまだ試せていない部分もありますが、制限内の表現は問題なくブラウザ上に描画されることが分かりました。弊社エンジニアにも見せてみたところ、ページローディングのアニメーション等がもっと自由になりそう!との声が。今後はデザイナーが動きをつけた状態で渡すことが可能になりそうです。うまくすれば工数の削減にも繋がるのでは...!ダウンロード#AfterEffectsこの記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。サポートをする「スキ」を押してクリエイターを応援しよう!23ソニックジャムデザインとテクノロジーで新しい体験をデザインする“ものづくりカンパニーSONICJAM。技術やデザインのTipsをつらつら紹介します。こちらもおすすめ【デザイナー向け】Lottieの使い方。健二ポートフォリオサイトを公開しました。kosukeLottieによるリッチアニメーション実装のためのAfterEff...81まりーな/エンジニアUIモーション制作ツールまとめ134むらかみ。クリエイターへのお問合せnoteカイゼン目安箱クリエイターの。