Asial Blog

Recruit! Asialで一緒に働きませんか?

Monaca/Cordovaですぐに使えるアニメーションライブラリまとめ

カテゴリ :
フロントエンド(HTML5)
タグ :
JavaScript
アニメーション
CSS3

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



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



jQueryのanimation代替え系 Velocity.js



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




MovieCropデモ

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デモ

MovieCropデモ



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


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



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




Animate.cssデモ

Animate.cssデモ



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


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



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




magicデモ

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デモ

wowデモ



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


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