2014/08/07

【jQuery】アニメーション動作に変化をつける『easing.js』の使い方

【jQuery】アニメーション動作に変化をつける『easing.js』の使い方

『easing.js』プラグインを利用すると,jQueryを利用してアニメーション動作をさせる場合に,30種類以上にもなるアニメーションの動作パターンを設定することが出来るようになります.

今回は,その方法と動作サンプルを紹介したいと思います.

目次

導入方法

easingプラグインを導入するには,jQuery Easing Plugin (version 1.3)から,jquery.easing.1.3.jsをダウンロードし,読み込ませるだけで使用可能になります.

アニメーションエフェクトを変化させるには,jQueryのanimate()メソッドにeasingエフェクト名を以下のように指定します.

    $("要素").animate({
	//変化させるプロパティ
    }, {
	//変化に係る時間等のオプション,
	easing : "エフェクト名"
    });

というように,easing:"エフェクト名"と指定します.

サンプル

ここからは,easingプラグインを使用したアニメーション動作をさせるサンプルになります.

エフェクト名のボタンをクリックすることで,下にあるグレーの要素の幅が変化します.

linear

swing

jswing

easeInQuad

easeOutQuad

easeInOutQuad

easeInCubic

easeOutCubic

easeInOutCubic

easeInQuart

easeOutQuart

easeInOutQuart

easeInQuint

easeOutQuint

easeInOutQuint

easeInSine

easeOutSine

easeInOutSine

easeInExpo

easeOutExpo

easeInOutExpo

easeInCirc

easeOutCirc

easeInOutCirc

easeInElastic

easeOutElastic

easeInOutElastic

easeInBack

easeOutBack

easeInOutBack

easeInBounce

easeOutBounce

easeInOutBounce

まとめ

easingプラグインを利用すると,スクロール移動時の動作や,文字の出現・消滅などのアニメーション動作に複雑な動きが付けられ,表現の幅が広がることでしょう.

導入はカンタンなのでぜひ使ってみてください.