ハイブリッドアプリ開発でも利用出来る、JavaScript＆CSSのアニメーションライブラリを集めてみました。

 

最近ではCanvasやWebGLを利用したアプローチもあると思いますが、ちょっとしたUXを作るにはライブラリが大きすぎます。開発にインパクトを与えず、既存の技術で対応でき、さらにネイティブライクである点をポイントにまとめてみました。

 

jQueryのanimation代替え系 Velocity.js

 

jQueryの$.animate()と同等のAPIを持ちながらjQueryには依存しない、高速アニメーションライブラリです。既存コードの「$.animate」を「$.velocity」とするだけでも運用が可能とあるので、いま速度に悩まされている方は、一度こちらを試してみてはいかがでしょうか。

 

MovieCropデモ

 

Site	jQuery.animate()の代替えライブラリ「Velocity.js」
GitHub	https://github.com/julianshapiro/velocity
Demo	http://jsfiddle.net/mach3ss/LSH79/embedded/result/
License	MIT

 

CSSスプライト MovieCrop.js

 

CSSのbackground-imageを利用したアニメーションを実装するjQueryプラグインです。背景要素をコントロールするため、フレーム分の画像を用意する必要がありますが、ほかのTween系のライブラリと組み合わせることで、より複雑なアニメーションも可能でしょう。

 

MovieCropデモ

 

Site	シンプルなスプライトアニメーションライブラリ「MovieCrop.js」
GitHub	https://github.com/mach3/js-moviecrop
Demo	http://jsfiddle.net/mach3ss/LSH79/embedded/result/
License	MIT

 

CSSアニメーションライブラリ１ Animate.css

 

既存スクリプトに影響を与えない、CSSのみで出来たライブラリです。
クロスブラウザに対応しており、タグのclass要素に指定するだけで利用できます。パララックスで利用したり、他のアニメーションライブラリと組み合わせても良さそうです。

 

Animate.cssデモ

 

Site	http://daneden.github.io/animate.css
GitHub	https://github.com/daneden/animate.css
Demo	サイト内で確認可能
License	MIT

 

CSSアニメーションライブラリ２ magic animations

 

こちらも、CSSのみのアニメーションライブラリの紹介です。ブラウザサポートも明確に記載されており、CSSの利用方法も解説がやさしく丁寧です。

 

magicデモ

 

Site	http://www.minimamente.com/magic-css3-animations-by-minimac
GitHub	https://github.com/miniMAC/magic
Demo	http://www.minimamente.com/example/magic_animations/
License	MIT

 

JavaScriptとCSSの magic animations

 

実際のアニメーションは前出のAnimate.cssを利用しており、スクリプト自体はjQueryなど特定のフレームワークに依存しません。

 

利用方法は、呼び出しのスクリプトを定義し、あとは各タグでclass属性と専用の属性でパラメータを指定するだけです。そのためJavaScriptに汚染されず、全体のコードがすっきりとするでしょう。

 

wowデモ

 

Site	http://mynameismatthieu.com/WOW/index.html
GitHub	https://github.com/matthieua/WOW
Demo	http://www.minimamente.com/example/magic_animations/
License	MIT

 

すぐに使えるアニメーションのライブラリとしてまとめてみました。ぜひ使ってみてください！