TweenLite for javascript

2011-11-28 23:21:49

使用说明(只支持单个属性变换,还很简陋,使用方式类似[url=http://wenku.baidu.com/view/d709c9150b4e767f5acfce4d.html]TweenLite[/url] ) var onTweenEnd = function(){ alert(&#34;end&#34;)}; //将dom的left变换至100px TweenLite.to(dom, 0.5, {left:100, onComplete:onTweenEnd }); [code] /** t: current time(当前时间); b: beginning value(初始值); c: change in value(变化量); d: duration(持续时间)。 */ var TweenLite = new Function(); TweenLite.cache = {}; TweenLite.TIMER_DURATION = 50; TweenLite.to = function(obj, duration, style ) { if(!obj) throw new Error(&#34;*** TweenLite.to arguments error! ***&#34;); style = style || {}; if(!style.ease) { style.ease = Tween.Linear; } var s; var v1; var v2; for(var i in style) { if(i==&#34;ease&#34; || i==&#34;onComplete&#34; || i==&#34;onCompleteParams&#34; || i==&#34;onUp&#100;ate&#34; ||i==&#34;onUp&#100;ateParams&#34; ) continue; s = i; v2 = style[i]; } if(!s) throw new Error(&#34;*** Error: arguments error,can&#39;t find attributes ***&#34;); var st = DOMUtil.getStyle(obj,s); v1 = st ? (st.indexOf(&#34;px&#34;)!=-1? st.split(&#34;px&#34;)[0]:st.indexOf(&#34;px&#34;)):0; v1 = parseInt(v1); v2 = v2 - v1; var cache = TweenLite.cache; var c = { id: (&#34;000000&#34;+Math.floor(Math.random()*100000)).substr(-6,6), target:obj, c:v2, t:0, b:v1, d:duration*Math.round(1000/TweenLite.TIMER_DURATION), att:s, ease:style.ease }; c.timerId = Math.random(); c.handler = function(obj,c, style) { if(c.t<c.d){ c.t++; val = Math.ceil(c.ease(c.t, c.b, c.c, c.d)); obj.style[c.att] = val + &#34;px&#34;; }else{ TweenLite.kill(obj); if(style.onComplete &amp;&amp; typeof style.onComplete==&#34;function&#34;) { if(style.onCompleteParams) { style.onComplete.apply(null, style.onCompleteParams); }else{ style.onComplete(); } } } } if(cache[obj] &amp;&amp; cache[obj].target == obj) { TweenLite.kill(obj); } cache[obj] = c; c.timerId = setInterval(c.handler, TweenLite.TIMER_DURATION, obj, c, style); } TweenLite.kill = function(obj) { var cache = TweenLite.cache; if(cache[obj]) { clearInterval(cache[obj].timerId); } } [/code] robertpenner的动画库自然不可少 [code]//author: cloudgamer //from: http://bbs.blueidea.com/forum.php?mod=viewthread&amp;tid=2905864 /* 算法来源:http://www.robertpenner.com/easing/ */ var Tween = { Linear: function(t,b,c,d){ return c*t/d + b; }, Quad: { easeIn: function(t,b,c,d){ return c*(t/=d)*t + b; }, easeOut: function(t,b,c,d){ return -c *(t/=d)*(t-2) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; } }, Cubic: { easeIn: function(t,b,c,d){ return c*(t/=d)*t*t + b; }, easeOut: function(t,b,c,d){ return c*((t=t/d-1)*t*t + 1) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t*t + b; return c/2*((t-=2)*t*t + 2) + b; } }, Quart: { easeIn: function(t,b,c,d){ return c*(t/=d)*t*t*t + b; }, easeOut: function(t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t*t*t + b; return -c/2 * ((t-=2)*t*t*t - 2) + b; } }, Quint: { easeIn: function(t,b,c,d){ return c*(t/=d)*t*t*t*t + b; }, easeOut: function(t,b,c,d){ return c*((t=t/d-1)*t*t*t*t + 1) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; return c/2*((t-=2)*t*t*t*t + 2) + b; } }, Sine: { easeIn: function(t,b,c,d){ return -c * Math.cos(t/d * (Math.PI/2)) + c + b; }, easeOut: function(t,b,c,d){ return c * Math.sin(t/d * (Math.PI/2)) + b; }, easeInOut: function(t,b,c,d){ return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; } }, Expo: { easeIn: function(t,b,c,d){ return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; }, easeOut: function(t,b,c,d){ return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; }, easeInOut: function(t,b,c,d){ if (t==0) return b; if (t==d) return b+c; if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; } }, Circ: { easeIn: function(t,b,c,d){ return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; }, easeOut: function(t,b,c,d){ return c * Math.sqrt(1 - (t=t/d-1)*t) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; } }, Elastic: { easeIn: function(t,b,c,d,a,p){ if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (!a || a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; }, easeOut: function(t,b,c,d,a,p){ if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (!a || a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b); }, easeInOut: function(t,b,c,d,a,p){ if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); if (!a || a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; } }, Back: { easeIn: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; return c*(t/=d)*t*((s+1)*t - s) + b; }, easeOut: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; }, easeInOut: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; } }, Bounce: { easeIn: function(t,b,c,d){ return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b; }, easeOut: 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; } }, easeInOut: function(t,b,c,d){ if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b; else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b; } } }[/code]