【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）、縦軸が値の変化。
これでよい。
jQuery.easing.myEasing = function(x, t, b, c, d) {
return x;
}
進捗率＝変化率で、進捗0なら変化も0、進捗1（100%）なら変化も1（100%）。
最初ゆっくり、後から加速の、二次関数を使った例
こんな変化をさせる場合。物が落下するときの感じの変化。
jQuery.easing.myEasing2 = function(x, t, b, c, d) {
return x * x;
}
あら？なんだかとても簡単そうな感じがしてきましたか？
変化のある動きをさせる例
こういうのはどうでしょう。
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%を超える例
戻ったり、行き過ぎたり。
jQuery.easing.myEasing4 = function(x, t, b, c, d) {
return x - Math.sin(x * Math.PI * 2) / 2;
}
なお、上のデモボタンはmarginを使ってアニメーションしているが、paddingを使うとマイナス値を設定できないので下のようになる。
というわけで、easing関数 自作すると楽しいよ！でした。
コメント