jQueryで要素にアニメーション動作をつけた際、
単調な動きだけでなく、加速・減速など動きに強弱のついたエフェクト
イージング(easing)処理をつけることが出来ます。
jQueryのノーマル状態では、イージング処理は「linear」と「swing」の
2つが用意されていますが、プラグインを使うことによって
アニメーションに多種多様なイージング処理をつけることができるようになります。
そんなイージング処理を、様々なパターンで簡単につけることが出来るプラグインを2つ
イージング動作サンプルと併せて紹介してみます。
jQuery Easing Plugin[jquery.easing.js]
jQuery Easing Plugin[jquery.easing.js]
jQuery Easing – jQuery 日本語リファレンス
もはやjQueryのイージング処理では定番のプラグイン。
プラグインファイル「jquery.easing.js」を読み込んだ後
jQueryアニメーション「.animate()」の処理を記述する際に
使用するイージング処理の種類(名前)を記述します。
jQueryノーマル状態で使える「linear」と「swing」の2つのイージング処理と併せて
このjQuery Easing Plugin[jquery.easing.js]でつけられるイージング処理を
以下に一覧にしてまとめてみました。
リスト左にあるイージング名をもとに、それぞれ黒い■をクリックしてみてください。
※アニメーション速度は「MotionSpeed」の値を変えることでスピードを変えることが出来ます。
イージング処理の記述方法は簡単で
「.animate()」の動作の後ろに付けたいイージング名を記述するだけです。
※「linear」の場合
◆SCRIPT $('○○○○').animate({○○○○},1000,'linear');
続いて2つ目。
jquery.easie.js
こちらも一つ目の「jQuery Easing Plugin」と同様に
プラグインファイル「jquery.easie.js」を読み込んだ後
jQueryアニメーション「.animate()」の処理を記述する際に
使用するイージング処理の種類(名前)を記述するだけです。
この「jquery.easie.js」でつけられるイージング処理の
サンプル動作一覧は以下になります。
リスト左にあるイージング名をもとに、それぞれ黒い■をクリックしてみてください。
※アニメーション速度は「MotionSpeed」の値を変えることでスピードを変えることが出来ます。
こちらの使い方も同様に使用するイージング名を
「.animate()」の動作の後ろに記述するだけです。
※「easieLinear」の場合
◆SCRIPT $('○○○○').animate({○○○○},1000,'easieLinear');
以上2つのjQueryアニメーションにイージング処理をつけることが出来るプラグインの紹介でした。
イージング処理をつけることで、単調なアニメーション動作ではなく
よりリアリティのある動きに仕上げることが簡単に出来ます。
jQueryアニメーションにイージング処理をつける際の参考にぜひ。。。
BGS-WORKS Blog » [Javascript] パララックスを作ってみたい! | 2012.06.06 15:32
[...] ■jQueryアニメーションにイージング(easing)処理をつけるプラグイン【イージング動作サンプル一覧】 上記チュートリアルで勉強した後は、やっぱりイージングですよね? 簡単につけ [...]
jQueryでスライダーつくる意欲がわいたサイトさんたち | つばめのおつかい | 2012.11.21 19:23
[...] jQueryアニメーションにイージング(easing)処理をつけるプラグイン【イージング動作サンプル一覧】 [...]
今からだって全然OK!僕がjQueryを0から覚えた サービスとか書籍まとめ | LogicA | 2013.05.29 2:28
[...] jQueryアニメーションにイージング(easing)処理をつけるプラグイン【イージング動作サンプル一覧】 | BlackFlag [...]
見出しを自動で目次化して クリックするとスムーズにスクロールさせる(スムーズスクロール編) | LogicA | 2013.05.29 14:16
[...] 無いとほぼ無意味です。こちらの記事 jQueryアニメーションにイージング(easing)処理をつけるプラグイン【イージング動作サンプル一覧】 | BlackFlag はいつもイージング利用のときにお世 [...]