Monaca/Cordovaですぐに使えるアニメーションライブラリまとめ
ハイブリッドアプリ開発でも利用出来る、JavaScript＆CSSのアニメーションライブラリを集めてみました。
最近ではCanvasやWebGLを利用したアプローチもあると思いますが、ちょっとしたUXを作るにはライブラリが大きすぎます。開発にインパクトを与えず、既存の技術で対応でき、さらにネイティブライクである点をポイント にまとめてみました。
jQueryのanimation代替え系 Velocity.js
jQueryの$.animate()と同等のAPIを持ちながらjQueryには依存しない、高速アニメーションライブラリです。既存コードの「$.animate」を「$.velocity」とするだけでも運用が可能とあるので、いま速度に悩まされている方は、一度こちらを試してみてはいかがでしょうか。
| 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系のライブラリと組み合わせることで、より複雑なアニメーションも可能でしょう。
| 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要素に指定するだけで利用できます。パララックスで利用したり、他のアニメーションライブラリと組み合わせても良さそうです。
| Site | http://daneden.github.io/animate.css |
|---|---|
| GitHub | https://github.com/daneden/animate.css |
| Demo | サイト内で確認可能 |
| License | MIT |
CSSアニメーションライブラリ２ magic animations
こちらも、CSSのみのアニメーションライブラリの紹介です。ブラウザサポートも明確に記載されており、CSSの利用方法も解説がやさしく丁寧です。
JavaScriptとCSSの magic animations
実際のアニメーションは前出のAnimate.cssを利用しており、スクリプト自体はjQueryなど特定のフレームワークに依存しません。
利用方法は、呼び出しのスクリプトを定義し、あとは各タグでclass属性と専用の属性でパラメータを指定するだけです。そのためJavaScriptに汚染されず、全体のコードがすっきりとするでしょう。
すぐに使えるアニメーションのライブラリとしてまとめてみました。ぜひ使ってみてください！
