jQuery Easing Plugin のイージング関数を直接利用する方法

はいどうも。ここのところ JavaScript に熱中してます。ということで今回は jQuery の Easing 関数を直接利用する方法をご紹介します。

Easing (イージング) 関数って？

イージング関数とは加速・減速を数式で表したもので、滑らかなアニメーションを表現する際に使われる関数です。jQuery においては jQuery.animate() メソッドの内部で利用されています。標準では linear と swing しか用意されていませんが、jQuery Easing Plugin にて 30 種類ものイージング関数を追加することができます。それぞれの効果についてはこちらのサイトの解説が詳しいです。

そんな素敵なイージング関数ですが jQuery.animate() 以外の処理に応用できたら夢が広がりそうな気がしませんか？

サンプル

Easing 関数の実体は jQuery.easing 下に定義されます。jQuery.easing.イージング名() で関数呼び出しができます。(ショートハンドを使った場合は $.easing.イージング名() です。)

var step = [];
for (var i = 0; i < 10; i++) {
	// 引数リスト: 第一引数は null 固定, 現在のステップ数, 初期値, 目標値, 総ステップ数から 1 を引いたもの
	var value = jQuery.easing.easeOutExpo(null, i, 0, 1, 9);
	step.push(value);
}
console.log(step);

実行結果

[
	0,
	0.5370626438563548,
	0.7856890042867318,
	0.9007874342519875,
	0.9540707971163875,
	0.9787376562472754,
	0.9901568667976963,
	0.9954432459391558,
	0.9978905083224759,
	1
]

0~1 の間を easeOutExpo で 10 分割したものが得られました。今度は easeInOutCirc を使って 0 ~ 100 のあいだを 15 分割してみます。

var step = [];
for (var i = 0; i < 15; i++) {
	// 引数リスト: 第一引数は null 固定, 現在のステップ数, 初期値, 目標値, 総ステップ数から 1 を引いたもの
	var value = jQuery.easing.easeInOutCirc(null, i, 0, 100, 14);
	step.push(value);
}
console.log(step);

実行結果

[
	0,
	0.5128340694606492,
	2.084257625004504,
	4.824604854737435,
	8.967409667585507,
	15.00728938881174,
	24.246062318114358,
	50,
	75.75393768188563,
	84.99271061118826,
	91.03259033241449,
	95.17539514526257,
	97.91574237499549,
	99.48716593053935,
	100
]

このようにイージング関数にて生成した値をアニメーション以外のところに応用することで jQuery.animate() 以外でもイージング関数を使うことが出来ます。何に使うかは……あなた次第！(すぐ思いつくところでは canvas 要素とか？)

というわけでお粗末様でした。