标签：
<!DOCTYPE html> <html> <head> <title>myAnimate</title> <style> *{ margin: 0; padding: 0; list-style: none; } #abc{ position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: #ff4500; } </style> <script src="tween.js"></script> </head> <body> <div id="abc" style="width:200px;"></div> <script> window.onload = function(){ ele = document.getElementById("abc"); function myAnimate(obj,attrObj,dur,fn){ var fn = fn?fn:Tween.Quad.easeIn; var start = []; var changes = []; var times = 0; for(var i in attrObj){ start[i]=getStyleNum(obj,i); changes[i]=attrObj[i]-start[i]; } obj.time = setInterval(function(){ var stops = true; if(times<dur){ stops = false; for(var i in attrObj){ getStyleNum(obj,i,fn(times,start[i],changes[i],dur)); } } times+=60; if(stops){ for(var i in attrObj){ getStyleNum(obj,i,attrObj[i]); } clearInterval(obj.time); obj.time = null; } },60); } //getStyleNum function getStyleNum(obj,attr,val){ if(obj.nodeType!=1){ //if it is not a element return; } var attr = attr.replace(/^\s+|\s+/,""); if(arguments.length==2){ if(attr=="opacity"){ return 100*parseInt(obj.currentStyle ? (obj.currentStyle[attr]||1) : (getComputedStyle(obj,null)[attr]||1)); //IE or FF } if(attr=="width"||attr=="height"||attr=="top"||attr=="left"){ attr = "offset" + attr.replace(attr.charAt(0),attr.charAt(0).toUpperCase()); return obj[attr]; } return obj.currentStyle ? parseInt(obj.currentStyle[attr]) : (getComputedStyle(obj,null)[attr]); } if(arguments.length==3){ switch(attr){ case "width": case "height": case "top": case "left": obj.style[attr]=val+"px"; break; case "opacity": obj.style.filter="alpha(opacity="+val+")"; obj.style[attr]=val/100; break; default: obj.style[attr]=val; } } } myAnimate(ele,{width:400,height:300,opacity:20},600,Tween.Back.easeOut); } </script> </body> </html>
tween.js
//animation caculate /* Linear:uniform Quadratic:2 square Cubic:3 square Quartic:4 square Quintic:5 square Sinusoidal:sine curve Exponential:index curve Circular:circular curve Elastic:index reduce sine curve Back:over range 3 square Bounce:index reduce rebounce each effect has three function: easeIn:from 0 accelerate add easeOut:reduce to 0 easeInOut:accelerate add then reduce the function has four parameters t--- current time b--- beginning value c--- change in value d--- duration */ 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; } } }
标签：
原文地址：http://www.cnblogs.com/sunbey/p/5141943.html
