最近のJS&CSSアニメーションライブラリまとめ


ふと仕事でHTML5アニメーションが必要になってきたので、少し調べてみました。

まずは、CSS3アニメーション vs JSアニメーションのパフォーマンスについて。以下のサイトでしっかり説明されています。
http://davidwalsh.name/css-js-animation

大雑把に内容を要約すると、以下のようなお話です。
– DOMを操作したJavaScript AnimationよりCSSの方が早い
– ただしCSSにも色々欠点がある(GPU負荷が大きい、ブラウザの対応とか)
結論: JavaScriptでアニメーションを最適化できるライブラリを使いましょう!

この記事で紹介されている最適化を施したJSライブラリはGSAPVelocity.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アプリだとは思わせないようなネイティブアプリ風のエフェクトを実現したい時に使えそう。大企業などが参画しているようで、そこそこオープンソースとして活発のように見えるので今後期待できそうな予感。

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だけで実装したい時にとても便利そう。

以上!
今回の記事ではざっと調べたライブラリを紹介しただけなので、それぞれのライブラリの持つ思想の差異だとか、実際に使ってみたアニメーションの比較などはできませんでした。
次回はその中の一つVelocity.jsに関して実際に使ってみて、より詳しく掘り下げていこうと思っています。