JavaScript/Library/script.aculo.us/Effect.Transitions http://www.ark-web.jp/sandbox/wiki/287.html

JavaScript/Library/script.aculo.us

JavaScript/Library/script.aculo.us/Effect.Transitions

[edit]

transition

transitionの説明です。
Effectのモーションを制御します。
Core Effectsのoptionsに指定します。
関数なので自分で作って指定することができます。

[edit]

定義

transition = function(pos)
[edit]

引数

pos モーション開始からモーション終了までの合計時間に対する経過時間の割合。つまりtime/totaltimeです。範囲は0~1です。
JSTweenerの引数t/dに相当します。

[edit]

戻り値

初期値から目的値までの差分に対する現在値の割合を0~1で返します。
JSTweenerの戻り値をrとするとJSTweenerの引数c,bを使用して(r-b)/cで表せます。
(JSTweenerの戻り値は初期値を含めた最終的な値を返すため。script.aculo.usはこの処理はupdate()内で行う。)

[edit]

サンプル

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;
  }
}



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);
  }
}

tag: Effects?, JavaScript, Tween?


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2007-12-13 (木) 19:55:20 (4267d)

アークウェブのサービスやソリューションはこちら