bodymovinで簡単アニメーション実装!

こんにちわこんばんわ、ちばです。

最近二週間に一回北海道に帰っていてお財布が氷河期になってきました。

そんな僕の趣味は家に引きこもりAfterEffectsで簡単な動画を作ることなのですが、
なんとその動画をjson形式で書き出しSVGアニメーションに出来るというのを知ったので試してみました。

bodymovin

今回はbodymovinというアニメーションを実装出来る素晴らしいライブラリを使用します。

bodymovinにはAfterEffects(以下AE)からjson形式でデータを書き出すためのプラグインも用意されているのでまずそちらをインストールしましょう。
インストール方法については下記の記事がとても丁寧なので参考にしてみてください。
http://www.sonicjam.co.jp/blog/hitori/001484/

インストール出来たら上記ページにそってAEからjsonデータを書き出しましょう。

そのデータをHTMLに出力します、記述のベースは以下のような形になります。


<div id="bodymovin"></div>

<script>
  var animData = {
  wrapper: document.getElementById('bodymovin'),
  animType: 'svg',
  loop: true,
  prerender: true,
  autoplay: true,
  path: 'data.json'
  };
  var anim = bodymovin.loadAnimation(animData);
  </script>

上記の用に記述してあげることでAE上で作ったモーションが動くと思います。

実際に私も試してみたので見てみてください٩(‘ω’)و

パスのトリミング、拡大縮小

モーションパス

まとめ

このように簡単にアニメーションを導入できるのと、デザイナーの作った動きをそのまま反映出来るのはいいですね。

モーション制作時の注意点として、エフェクト系が基本的に使えない、画像が使えない等の制約がある点には注意です。

また、以下のサイトでjsonをダウンロードすることも可能なのでこちらのデータで試すのが簡単だと思うので、ぜひお試しください。
LottieFiles

Writer

chiba

ちば

北海道から上京してきました。
コーダー歴二年目入りましたヽ(゚∀。)ノ

Page Topへ