SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【jQuery】easing関数を作る

animateやslideDownなどの動きのある処理で使う、値の変化の仕方を指定できるeasing。

jQuery本体には linear, swing のみがあり、jQueryUIやeasingプラグインを追加するとバリエーションが何種類も増えるeasing。

気に入った関数がない場合や、プラグインをわざわざ追加したくないとき、動きを自在にコントロールしたいときには、作ってしまってはいかがでしょう。

案外簡単に自作でき、理屈もわりと簡単。

追加方法

easing関数を追加するには、jQuery.easingに、好きな名前で関数を登録するだけ。

jQuery.easing.myEasing = function(x, t, b, c, d) {
	return x;
}

引数が5つあるが、基本は第一引数だけ見れば、だいたいのことができる。

第一引数 アニメーションなどの進捗率を表していて0→1へ変化する
第二引数 経過時間(ミリ秒)
第三引数 0固定
第四引数 1固定
第五引数 アニメーション実行のトータル時間(ミリ秒)

戻り値は変化率とでもいえばよいだろうか。

一番簡単な、進捗に正比例して変化する例

こんな変化をさせる場合。横軸が時間(0~1)、縦軸が値の変化。

easing-1

これでよい。

jQuery.easing.myEasing = function(x, t, b, c, d) {
	return x;
}

進捗率=変化率で、進捗0なら変化も0、進捗1(100%)なら変化も1(100%)。

最初ゆっくり、後から加速の、二次関数を使った例

こんな変化をさせる場合。物が落下するときの感じの変化。

easing-2

jQuery.easing.myEasing2 = function(x, t, b, c, d) {
	return x * x;
}

あら?なんだかとても簡単そうな感じがしてきましたか?

変化のある動きをさせる例

こういうのはどうでしょう。

easing-3

jQuery.easing.myEasing3 = function(x, t, b, c, d) {
	return x + Math.sin(4 * x * Math.PI) / 4;
}

変化率は0から1の範囲内しかだめ?

そうでもないが、問題があることもある。

marginを変化させるときには、マイナスの値や、目標値をオーバーした値などを指定しても反映されるが、paddingやopacityを変化させるときは、マイナスの値など設定できない値がある。

また、開始は0で終了は1になるようにしておかないと、使いづらいとは思う。

しかし、自分が何をしようとしているか分かっている場合は、何でもありです。

変化が一時的にマイナスになったり、一時的に100%を超える例

戻ったり、行き過ぎたり。

easing-4

jQuery.easing.myEasing4 = function(x, t, b, c, d) {
	return x - Math.sin(x * Math.PI * 2) / 2;
}

なお、上のデモボタンはmarginを使ってアニメーションしているが、paddingを使うとマイナス値を設定できないので下のようになる。

というわけで、easing関数 自作すると楽しいよ!でした。

関連するメモ

コメント