SVGアニメーションライブラリBodymovin使ってみた

Aftereffects extensionのbodymovinと、Airbnb製のライブラリであるLottieを使って、ネイティブアプリ上でアニメーションを実現する方法をすでに2回に分けて紹介しました。

After Effectsで作成したアニメーションをネイティブアプリで再生するAirbnb製のライブラリを使ってみた【前編】

After Effectsで作成したアニメーションをネイティブアプリで再生するAirbnb製のライブラリを使ってみた【後編】

これらの記事を書いた直後、何人かにWeb上でできないの？という質問を受けたので、今回はAftereffectsで作成したアニメーションを、SVGアニメーションで動かす方法をご紹介したいと思います。

作ったアニメーションの一部をこちらに載せています

SVG ANIMATION

1 なぜSVGアニメーションなのか
2 BodymovinをつかってJSONファイルを生成する
3 Bodymovin.jsを使おう
4 Demo
5 さいごに

なぜSVGアニメーションなのか

ブラウザ上でアニメーションを実装する方法は、cssであったりjQueryだったり多数存在しますが、その中でも僕は断然このSVGアニメーションを推したい。理由は以下の通り。

1. jpgやpngといった画像を使用しないのでファイルサイズが軽量
2. ベクターなので滑らかで美しい。デバイスの解像度を気にする必要もない。
3. 他プラットフォ―ムでアニメーションリソースの使いまわしが可能

1と2は、SVGアニメーションというよりはSVGの利点。3に関しては今回紹介するBodymovinを使った場合に限定されてしまうかもしれませんが、JSONを書き出してしまえば、iOS, android, reactネイティブなどの他プラットフォームでカンタンに実装することができる上に、アニメーションを一元管理することも出来ます。

ただ、SVGアニメーションってJSめちゃくちゃ書けるエンジニアの仕事だと思ってませんか？JSそんなにわからないデザイナーでもできます！今回はbodymovin.jsという、javascriptのライブラリを使用して、サクサクっと実装してしまいましょう。

BodymovinをつかってJSONファイルを生成する

AfterEffectsにプロジェクトからJSONを生成するためのエクステンションを入れ、実際にJSONを書き出します。詳しいインストール方法と、書き出しの方法はこちらの過去記事に記載してありますので参考にしてください。

Bodymovin.jsを使おう

先程AfterEffectsのエクステンションを使うためにダウンロードしたリポジトリ(bodymovin)の中のbuild/player/に入っているbodymovin.jsをプロジェクトに読み込ませてください。

<script src="js/bodymovin.js" type="text/javascript"></script>

1	<script src="js/bodymovin.js" type="text/javascript"></script>

次に、SVGアニメーション用の箱を用意します。

<div id="svg_anim"></div>

1	<div id="svg_anim"></div>

最後に以下の設定を行うだけです。

var animData = {
  container: $('#svg_anim'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: 'json/data.json'
};
var anim = bodymovin.loadAnimation(animData);
window.onresize = anim.resize.bind(anim);

var animData = {

container: $('#svg_anim'),

renderer: 'svg',

loop: false,

autoplay: false,

path: 'json/data.json'

};

var anim = bodymovin.loadAnimation(animData);

window.onresize = anim.resize.bind(anim);

animData{}の中で、アニメーションの設定を行っています

container SVGアニメーション用に作った箱を指定。
render ‘svg’ / ‘canvas’ / ‘html’ の中から選択。
loop animationを連続で再生するかどうか指定。
autoplay animationを自動で再生するかどうか指定。
path AfterEffectsから書き出したJSONまでのパスを記載。とても大事です。

Demo

<div id="svg_text_hello" class="container"></div>

1	<div id="svg_text_hello" class="container"></div>

var animDataHello = {
  container: document.getElementById('svg_text_hello'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '//tondemodesign.com/wp-content/uploads/json/text_hello.json'
};
var animHello = bodymovin.loadAnimation(animDataHello);
window.onresize = animHello.resize.bind(animHello);

var animDataHello = {

container: document.getElementById('svg_text_hello'),

renderer: 'svg',

loop: true,

autoplay: true,

path: '//tondemodesign.com/wp-content/uploads/json/text_hello.json'

};

var animHello = bodymovin.loadAnimation(animDataHello);

window.onresize = animHello.resize.bind(animHello);

さいごに

とてもカンタンにSVGアニメーションをあなたのウェブサイトで実現できることがお分かりいただけたかと思います。ただ、Bodymovinも万能では無いみたいで、AfterEffectsの一部の機能に対応していなかったりします。出来ないこと、対策方法などについても今後書いていきます。

このような”アウトプットにつながるインプット”を日々やりまくってます。一緒に最先端を走りませんか！？テクノロジーで誰かを幸せにしたいアルバイト、インターン募集しています！

ランチのお誘いも大歓迎！！DMください🐤

Twitterアカウントはこちら