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

transition †

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

定義 †

transition = function(pos)

引数 †

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

戻り値 †

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

サンプル †

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?

Menu

• システム勉強会
• オープンソース・ライセンスなツールなど
• Plaggerでみんなのブックマークをアグリゲート

Movable Type用プラグイン Aシリーズ

ECサイト構築 Zen Cartハイエンド

Tag

最新の20件

ARK-Webビジネスブログの最新記事