easing関数をカスタマイズするには？

jQuery

easing関数をカスタマイズするには？

Advent Calendar 2012 軽めのjQueryの18日目です。

jQueryには、animate()とそのショートカットである、fadeIn()、fadeOut()、slideUp()、slideDown()などで使うことができるeasing関数があります。

jQueryの標準ではlinearとswingの2種類、jquery.easing.jsのプラグインで拡張すると、easeInQuad、easeOutQuadなどの30種類（jswingを数えると31種類）がよく知られています。

それでは、easing関数をカスタマイズするにはどうすればいいのでしょうか？

例えば、linearをカスタマイズして、イージング処理を2回繰り返すだけのlinear2nd()という関数は以下のようになります。

  1.  
  2. $.extend($.easing,{
  3.    linear2nd: function(status,cur_time,firstNum,changeVal,dur_time){
  4.       if(status > 0.5) cur_time-=dur_time/2;
  5.       return firstNum + changeVal * (cur_time/=dur_time) * 2;
  6.    }
  7. });
  8.  

 

easing関数は5つの引数をとることができます。

status cur_timeをdur_timeで割った、0から1の値がはいります。
cur_time 経過時間（単位ms）
firstNum スタート時間、初期では常に0になります。
changeVal 変化量、初期では常に1になります。
dur_time 実行時間（単位ms）

 

デモと、ソースはこちらで確認ができます。 ※ Google Chrome / Safari / Firefoxで動作確認
デモページ
GitHub/Isotake/20121218

 

おわり

Advent Calenderには今回が初参加です。
軽めのjQueryということで思い切って参加してみました。

それでは、19日目にバトンタッチ！

 

参照サイト

 

関連記事