デザイナーでもできる、 After Effects からのSVGアニメーション書き出し

Updated

2022.10.15

Published

2017.06.11

After Effects でつくったモーショングラフィックは、アドオンを利用して簡単に書き出し、ブラウザで表示できます。

書き出す方法

まずは、モーショングラフィックを用意します。

Bodymovin を使って書き出す

After EffectsのデータをHTMLに書き出せるExtension「Bodymovin」を使います。
公式サイトからインストールします。

インストール後、 「環境設定 > 一般設定 > スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れる 必要があります。

「ウィンドウ > 拡張機能 > Bodymovin」をクリックするとこんなウィンドウが。

書き出したいコンポジションを Select （一番左列クリック）し、Render ボタンをクリックすると data.json が出力されます。
※出力先は、「../Destination Folder」列の緑文字クリックで変更

実際に表示してみたDEMOはこちら。

DEMO1 circle_animation
DEMO2 logo_animation

bodymovin.js は Github にアップされているものを利用。
index.html では body 内に以下記述。これだけです。

<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>