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