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.easie.js

こちらも一つ目の「jQuery Easing Plugin」と同様に
プラグインファイル「jquery.easie.js」を読み込んだ後
jQueryアニメーション「.animate()」の処理を記述する際に
使用するイージング処理の種類(名前)を記述するだけです。

この「jquery.easie.js」でつけられるイージング処理の
サンプル動作一覧は以下になります。

リスト左にあるイージング名をもとに、それぞれ黒い■をクリックしてみてください。
※アニメーション速度は「MotionSpeed」の値を変えることでスピードを変えることが出来ます。

サンプルリストを別枠で表示

こちらの使い方も同様に使用するイージング名を
「.animate()」の動作の後ろに記述するだけです。
※「easieLinear」の場合

◆SCRIPT
$('○○○○').animate({○○○○},1000,'easieLinear');

以上2つのjQueryアニメーションにイージング処理をつけることが出来るプラグインの紹介でした。

イージング処理をつけることで、単調なアニメーション動作ではなく
よりリアリティのある動きに仕上げることが簡単に出来ます。

jQueryアニメーションにイージング処理をつける際の参考にぜひ。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (4)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryアニメーションにイージング(easing)処理をつけるプラグイン【イージング動作サンプル一覧】

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR