最近のHTML5アニメーションについてのまとめです。
まとめを紹介する前にCSS3アニメーション vs JSアニメーションのパフォーマンスについての有名な海外の記事を紹介します。
http://davidwalsh.name/css-js-animation
大雑把に内容を要約すると、以下のようなお話です。
- DOMを操作したJavaScript AnimationよりCSSの方が早い
- ただしCSSにも色々欠点がある(GPU負荷が大きい、ブラウザの対応とか)
結論: JavaScriptでアニメーションを最適化できるライブラリを使いましょう！
この記事で紹介されている最適化を施したJSライブラリはGSAPとVelocity.jsです。大規模なアニメーションでない場合はVelocity.jsがおすすめのようです。
もちろん上記の他にも色々ライブラリは存在し、使用用途により最適なライブラリは変わってくると思います。
今回は、いくつか現状のJS&CSSアニメーションライブラリについて少しだけ調べてみて、所感を交えてざっとまとめてみました。
|||
|:-----------|:-----------|:-----------|
| GitHub | https://github.com/julianshapiro/velocity |
| HP | http://velocityjs.org/ |
| Demo | http://julian.com/research/velocity/demo.html
| Size | 約8kb(ただし、jqueryの依存があるため、jquery 2.0 なら+81kb) |
所感: モバイル環境でそこそこの量（大規模過ぎず、小規模過ぎず）のアニメーションを動かす場合に、かなり使えるのではないかと思っています。個人的にはzepto.jsを使用して動けばさらに軽量で最高なんですが(今は残念ながら動いてなさそう)。
- EaselJS: HTML5環境でcanvas作成が簡単にできるようにするもの
- TweenJS: 全ブラウザサポート、独立して動作するJSアニメーションライブラリ(約17kb)
- SoundJS: その名の通りaudio関連のライブラリ
- PreloadJS: scriptやリソースのロードに関するライブラリ
|||
|:-----------|:-----------|:-----------|
| HP | http://createjs.com/#!/CreateJS |
| Size | 約152kb |
所感: Adobeがスポンサーなので、FLASHデベロッパー向けのJSライブラリという印象。本格的に大規模なFlashアプリやゲームのようなものをJSで実現したい時に良さそう。ちなみにアニメーションのコアを提供するTweenJSは独立して動作するので、それだけで軽量ライブラリとして使えそう。
|||
|:-----------|:-----------|:-----------|
| GitHub | https://github.com/famous/famous |
| HP&Demo | https://famo.us/ |
| Size | JS 約178kb, CSS 約2kb |
所感: Webアプリだとは思わせないようなネイティブアプリ風のエフェクトを実現したい時に使えそう。大企業などが参画しているようで、そこそこオープンソースとして活発のように見えるので今後期待できそうな予感。
|||
|:-----------|:-----------|:-----------|
| GitHub | https://github.com/adobe-webplatform/Snap.svg |
| HP | http://snapsvg.io/ |
| Demo | http://snapsvg.io/demos/ |
| Size | 73kb |
所感: やはりSVGはcanvasと違ってvectorなので、screen sizeに依存しない描画パフォーマンスが期待できそう。また、デザイナーさんにtoolを使って作ってもらったSVGをそのままアニメーションさせたい時に効果的。
|||
|:-----------|:-----------|:-----------|
| GitHub | https://github.com/visionmedia/move.js/ |
| Demo | http://visionmedia.github.io/move.js/ |
| Size | 約16kb |
所感: とてもシンプルで、学習コストも低そう。いくつかのオブジェクトを単に移動させるようなシンプルなアニメーションのみの場合に使えそう。
|||
|:-----------|:-----------|:-----------|
| GitHub | https://github.com/uxebu/bonsai |
| Demo | http://demos.bonsaijs.org |
| Size | 約139kb |
所感: サンプルやドキュメントも割と充実しているので、少し派手なエフェクトを実装したい場合、お手軽に試せそう。
|||
|:-----------|:-----------|:-----------|
| HP | http://jaction.info/ |
| Size | 約28kb |
所感: Flashゲームのようなものを作りたい時に良さそう。チュートリアルなども充実していて、プラグインなどの仕組みもあるみたい。
|||
|:-----------|:-----------|:-----------|
| HP | http://jindo.dev.naver.com/collie/ |
| Size | 約102kb |
所感: モバイルデバイスにも最適化されているようなので、モバイル向けに簡単なゲームなど多くのアニメーションを必要とする場合に使ってみたいなぁ。
|||
|:-----------|:-----------|:-----------|
| GitHub | https://github.com/miniMAC/magic |
| HP | http://www.minimamente.com/magic-css3-animations-by-minimac/ |
| Demo | http://www.minimamente.com/example/magic_animations/ |
| Size | 約78kb (minimized cssファイル) |
所感: JSを使うのは煩わしい、CSSだけ読み込んでhtmlにクラスを当てればアニメーション＆エフェクトのできあがり、というお手軽感で人気がありそうなライブラリ。デモサイトを見ていても、CSSだけでこんなにできるんだなぁと驚いた。
|||
|:-----------|:-----------|:-----------|
| GitHub | https://github.com/daneden/animate.css |
| HP | http://daneden.github.io/animate.css/ |
| Size | 約55kb |
所感: アニメーションというよりはエフェクトという印象。magicより機能は少ないように見えますが、軽量なので簡易エフェクトをCSSだけで実装したい時にとても便利そう。
以上！
今回の記事ではざっと調べたライブラリを紹介しただけなので、それぞれのライブラリの持つ思想の差異だとか、実際に使ってみたアニメーションの比較などはできませんでした。
次回はどれかのライブラリをより詳しく掘り下げた記事を書ければいいなと思います。
他にも最近アツいライブラリをご存知でしたらまとめに追記いたしますのでお知らせください。