アークウェブシステム開発SandBox

• 追加された行はこの色です。
• 削除された行はこの色です。
• JavaScript/Library/script.aculo.us/Effect.Transitions へ行く。
• JavaScript/Library/script.aculo.us/Effect.Transitions の差分を削除

 [[JavaScript/Library/script.aculo.us>http://www.seakinfo.com/blog/]]
 [[JavaScript/Library/script.aculo.us]]
 
 &pgid();
 
 #contents();
 
 ** transition [#fa062863]
 transitionの説明です。
 Effectのモーションを制御します。
 Core Effectsのoptionsに指定します。
 関数なので自分で作って指定することができます。
 
 *** 定義 [#v6802363]
  transition = function(pos)
 *** 引数 [#d9f7ee22]
 pos モーション開始からモーション終了までの合計時間に対する経過時間の割合。つまりtime/totaltimeです。範囲は0~1です。
 JSTweenerの引数t/dに相当します。
 *** 戻り値 [#f4726959]
 初期値から目的値までの差分に対する現在値の割合を0~1で返します。
 JSTweenerの戻り値をrとするとJSTweenerの引数c,bを使用して(r-b)/cで表せます。
 (JSTweenerの戻り値は初期値を含めた最終的な値を返すため。script.aculo.usはこの処理はupdate()内で行う。)
 
 #blikimore
 
 *** サンプル [#ia2dbabe]
 JSTweenerのeaseOutBounceを移植してみます。
 オリジナル:
  easeOutBounce: function(t, b, c, d) {
    if((t/=d) <(1/2.75)) {
      return c*(7.5625*t*t) + b;
    } else if(t <(2/2.75)) {
      return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
    } else if(t <(2.5/2.75)) {
      return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
    } else {
      return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
    }
  }
 &br;
 script.aculo.us用:
  easeOutBounce: function(pos) {
    if(pos < (1/2.75)) {
      return (7.5625*pos*pos);
    } else if(pos < (2/2.75)) {
      return (7.5625*(pos-=(1.5/2.75))*pos + .75);
    } else if (pos < (2.5/2.75)) {
      return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
    } else {
      return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
    }
  }
 
 
 
 // #blikifooter(進地)
 
 tag: [[Effects>http://www.seakinfo.com/blog/]], [[JavaScript>http://www.seakinfo.com/blog/]], [[Tween>http://www.seakinfo.com/blog/]]
 tag: [[Effects>tag/Effects]], [[JavaScript>tag/JavaScript]], [[Tween>tag/Tween]]