最近の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アニメーションライブラリについて少しだけ調べてみて、所感を交えてざっとまとめてみました。
# Velocity.js
軽量なjquery animationの代替で、キャッシュによる最適化やhardwareアクセサレーターの使用等により高速化。jQueryに依存していますが、そこそこモバイルでも使用できる軽快さがありそうです。より高度なアニメーションを使うためのUI Packという拡張パッケージも存在します。
|||
|:-----------|:-----------|:-----------|
| 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を使用して動けばさらに軽量で最高なんですが(今は残念ながら動いてなさそう)。
# CreateJS
HTML5リッチコンテンツ作成用。FlashのActionScriptの実装者が参加しているようで、ActionScriptライクな書き方ができるようです。
スイートとなっておりいくつかのライブラリを梱包しているようです。
- EaselJS: HTML5環境でcanvas作成が簡単にできるようにするもの
- TweenJS: 全ブラウザサポート、独立して動作するJSアニメーションライブラリ(約17kb)
- SoundJS: その名の通りaudio関連のライブラリ
- PreloadJS: scriptやリソースのロードに関するライブラリ
|||
|:-----------|:-----------|:-----------|
| HP |
http://createjs.com/#!/CreateJS |
| Size | 約152kb |
所感: Adobeがスポンサーなので、FLASHデベロッパー向けのJSライブラリという印象。本格的に大規模なFlashアプリやゲームのようなものをJSで実現したい時に良さそう。ちなみにアニメーションのコアを提供するTweenJSは独立して動作するので、それだけで軽量ライブラリとして使えそう。
# famo.us
HTML5アプリケーションでネイティブアプリと同レベルの美しいエフェクトやアニメーションを提供するJavaScriptフレームワーク。
|||
|:-----------|:-----------|:-----------|
| GitHub |
https://github.com/famous/famous |
| HP&Demo |
https://famo.us/ |
| Size | JS 約178kb, CSS 約2kb |
所感: Webアプリだとは思わせないようなネイティブアプリ風のエフェクトを実現したい時に使えそう。大企業などが参画しているようで、そこそこオープンソースとして活発のように見えるので今後期待できそうな予感。
# Snap.svg
SVGライブラリ
Raphaëlをmodernブラウザ向けにscratchで書き直したもの。
SVGオブジェクトを他のanimationライブラリと同様のJavaScriptによる操作で容易に アニメーションを実装できるようにしたライブラリ。このSnap.svgを通じてSVGを生成できるのはもちろんのことAdobe IllustratorやSketchで作ったSVGを非同期にロードして扱うことも可能。
|||
|:-----------|:-----------|:-----------|
| 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をそのままアニメーションさせたい時に効果的。
# Movie.js
超軽量、内部的にCSSを使用したライブラリ。
|||
|:-----------|:-----------|:-----------|
| GitHub |
https://github.com/visionmedia/move.js/ |
| Demo |
http://visionmedia.github.io/move.js/ |
| Size | 約16kb |
所感: とてもシンプルで、学習コストも低そう。いくつかのオブジェクトを単に移動させるようなシンプルなアニメーションのみの場合に使えそう。
# Bonsai
見栄えの良いgraphやアニメーションを簡単に実現できるライブラリ。
|||
|:-----------|:-----------|:-----------|
| GitHub |
https://github.com/uxebu/bonsai |
| Demo |
http://demos.bonsaijs.org |
| Size | 約139kb |
所感: サンプルやドキュメントも割と充実しているので、少し派手なエフェクトを実装したい場合、お手軽に試せそう。
# jAction
日本の会社が運営しているHTML5ゲーム向けライブラリ。FlashゲームのようなものをJSで作成する際のフレームワークを提供しています。
|||
|:-----------|:-----------|:-----------|
| HP |
http://jaction.info/ |
| Size | 約28kb |
所感: Flashゲームのようなものを作りたい時に良さそう。チュートリアルなども充実していて、プラグインなどの仕組みもあるみたい。
# CollieJS
HTML5を利用し、アニメーションとゲームを作るためのJavaScriptライブラリーです。キャンバスとDOMを利用し、各デバイスに最適化されたパフォーマンスを提供できるライブラリのようです。
|||
|:-----------|:-----------|:-----------|
| HP |
http://jindo.dev.naver.com/collie/ |
| Size | 約102kb |
所感: モバイルデバイスにも最適化されているようなので、モバイル向けに簡単なゲームなど多くのアニメーションを必要とする場合に使ってみたいなぁ。
# magic
JS無しでCSSのみで実現するCSSアニメーションライブラリ。
|||
|:-----------|:-----------|:-----------|
| 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だけでこんなにできるんだなぁと驚いた。
# animate.css
magicと同じくCSSのみのライブラリです。軽量で簡単なエフェクトを提供しています。
|||
|:-----------|:-----------|:-----------|
| GitHub |
https://github.com/daneden/animate.css |
| HP |
http://daneden.github.io/animate.css/ |
| Size | 約55kb |
所感: アニメーションというよりはエフェクトという印象。magicより機能は少ないように見えますが、軽量なので簡易エフェクトをCSSだけで実装したい時にとても便利そう。
以上！
今回の記事ではざっと調べたライブラリを紹介しただけなので、それぞれのライブラリの持つ思想の差異だとか、実際に使ってみたアニメーションの比較などはできませんでした。
次回はどれかのライブラリをより詳しく掘り下げた記事を書ければいいなと思います。
他にも最近アツいライブラリをご存知でしたらまとめに追記いたしますのでお知らせください。
