Effectの再実装(リアルタイム→プリレンダ)

easingを組み込んだEffectがほしいので実装を開始しました。

今までは、現在の状態を元に次の状態を演算で(リアルタイムに)求めていましたが、
あらかじめ演算した結果(プリレンダ)を元に描画を行う方式に変更します。

骨子はこんな感じ。

uuclass.Easing = {};
uu.mix(uuclass.Easing, {
  // t:Number - time
  // b:Number - bias - 初期値
  // c:Number - chage - 変化量
  // d:Number - duration(unit: ms) - エフェクト時間
  linear:         function(t, b, c, d) { return c * t / d + b; },
  easeInQuad:     function(t, b, c, d) { return c * (t /= d) * t + b; },
  easeOutQuad:    function(t, b, c, d) { return -c * (t /= d) * (t - 2) + b; },
  easeInOutQuad:  function(t, b, c, d) { if ((t /= d / 2) < 1) { return c / 2 * t * t + b; }
                                         return -c / 2 * ((--t) * (t - 2) - 1) + b; },
    :
    :
});
uuclass.Tween = uuclass.kiss();
uuclass.Tween.prototype = {
  construct:function(elm, param /* = { duration, revert, fn, easing } */) {},
  fadeout:  function(param /* = { easing, end } */) {},
  move: function(param /* = { easing, pos } */) {},
    :
    :
  play: function() {},
  stop: function() {},
  pause: function() {},
  plaing: function() {},
  paused: function() {}
};

こんな感じに記述すると、
フェードアウトしつつも x200, y200 に要素がススーっと移動します。

  var tw = new uuclass.Tween(uu.id("hoge"), { easing: uuclass.Easing.easeInOutQuad, duration: 3000 });
  tw.fadeout().move({ pos: { x: 200, y: 200 }}).play();