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

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

 

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

 

jQueryのanimation代替え系 Velocity.js

 

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

 


MovieCropデモ

 

SitejQuery.animate()の代替えライブラリ「Velocity.js」
GitHubhttps://github.com/julianshapiro/velocity
Demohttp://jsfiddle.net/mach3ss/LSH79/embedded/result/
LicenseMIT

 

CSSスプライト MovieCrop.js

 

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

 


MovieCropデモ

 

Siteシンプルなスプライトアニメーションライブラリ「MovieCrop.js」
GitHubhttps://github.com/mach3/js-moviecrop
Demohttp://jsfiddle.net/mach3ss/LSH79/embedded/result/
LicenseMIT

 

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

 

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

 


Animate.cssデモ

 

Sitehttp://daneden.github.io/animate.css
GitHubhttps://github.com/daneden/animate.css
Demoサイト内で確認可能
LicenseMIT

 

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

 

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

 


magicデモ

 

Sitehttp://www.minimamente.com/magic-css3-animations-by-minimac
GitHubhttps://github.com/miniMAC/magic
Demohttp://www.minimamente.com/example/magic_animations/
LicenseMIT

 

JavaScriptとCSSの magic animations

 

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

 

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

 


wowデモ

 

Sitehttp://mynameismatthieu.com/WOW/index.html
GitHubhttps://github.com/matthieua/WOW
Demohttp://www.minimamente.com/example/magic_animations/
LicenseMIT

 

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

前の記事へ

次の記事へ

一覧へ戻る
PAGE TOP