JS Motion Frame Tween

<! DOCTYPE html>{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>window.onload=function() {ele= document.getElementById ("abc")); functionmyanimate (OBJ,ATTROBJ,DUR,FN) {varfn = fn?Fn:Tween.Quad.easeIn; varStart = []; varChanges = []; varTimes = 0;  for(varIinchattrobj) {Start[i]=Getstylenum (obj,i); Changes[i]=attrobj[i]-Start[i]; } obj.time= SetInterval (function(){            varStops =true; if(times<dur) {Stops=false;  for(varIinchattrobj)                {Getstylenum (OBJ,I,FN (Times,start[i],changes[i],dur)); }} times+=60; if(stops) { for(varIinchattrobj)                {getstylenum (obj,i,attrobj[i]);                } clearinterval (Obj.time); Obj.time=NULL; }        },60); }    //Getstylenum    functionGetstylenum (obj,attr,val) {if(obj.nodetype!=1) {//if it is not a element            return; }        varattr = Attr.replace (/^\s+|\s+/, ""); if(arguments.length==2){            if(attr== "Opacity"){                return100*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 ()); returnObj[attr]; }            returnObj.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>
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 curv                        e elastic:index reduce sine curve back:over range 3 Square bounce:index reduce rebounce  Each effect have three Function:easeIn:from 0 accelerate add easeout:reduce to                0 easeinout:accelerate Add then reduce the function have four parameters          T---current time b---beginning value c---change in value d---duration */Tween={Linear:function(t,b,c,d) {returnC*T/D + b; },Quad: {easeIn:function(t,b,c,d) {returnc* (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)returnC/2*t*t + b;return-C/2 * ((--T) * (t-2)-1) + B;}}, Cubic: {easeIn:function(t,b,c,d) {returnc* (T/=d) *t*t + b;}, EaseOut:function(t,b,c,d) {returnc* ((t=t/d-1) *t*t + 1) + B;}, Easeinout:function(t,b,c,d) {if((T/=D/2) < 1)returnC/2*t*t*t + b;returnC/2* ((t-=2) *t*t + 2) + B;}}, quart: {easeIn:function(t,b,c,d) {returnc* (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)returnC/2*t*t*t*t + b;return-C/2 * ((t-=2) *t*t*t-2) + B;}}, Quint: {easeIn:function(t,b,c,d) {returnc* (T/=d) *t*t*t*t + b;}, EaseOut:function(t,b,c,d) {returnc* ((t=t/d-1) *t*t*t*t + 1) + B;}, Easeinout:function(t,b,c,d) {if((T/=D/2) < 1)returnC/2*t*t*t*t*t + b;returnC/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) {returnc * 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, Ten * (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)returnb; if(T==d)returnB +C; if((T/=D/2) < 1)returnC/2 * MATH.POW (2, Ten * (t-1)) + B;returnC/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) {returnc * 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;returnC/2 * (MATH.SQRT (1-(t-=2) *t) + 1) + B;}}, Elastic: {easeIn:function(t,b,c,d,a,p) {if(t==0)returnbif((T/=d) ==1) return b+c; if (!p) p=d*.3;if(!a | | A < Math.Abs (c)) {a=c;varS=P/4; }Else vars = 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)returnbif((T/=d) ==1) return b+c; if (!p) p=d*.3;if(!a | | A < Math.Abs (c)) {a=c;varS=P/4; }Else vars = 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)returnbif((T/=D/2) ==2)returnB+c;if(!p) p=d* (. 3*1.5); if(!a | | A < Math.Abs (c)) {a=c;varS=P/4; }Else vars = 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;returnA*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; returnc* (T/=d) *t* ((s+1) *t-s) + B;}, EaseOut:function(t,b,c,d,s) {if(s = = undefined) s = 1.70158; returnc* ((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)returnC/2* (t*t* (((s*= (1.525) +1) *t-s) + B;returnC/2* ((t-=2) *t* (((s*= (1.525)) +1) *t + s) + 2) + B;}}, Bounce: {easeIn:function(t,b,c,d) {returnC-tween.bounce.easeout (d-t, 0, C, D) +b; }, EaseOut:function(t,b,c,d) {if((T/=d) < (1/2.75)) {                returnc* (7.5625*t*t) +b; } Else if(T < (2/2.75)) {returnc* (7.5625* (t-= (1.5/2.75)) *t +.) + B; }Else if(T < (2.5/2.75)) {returnc* (7.5625* (t-= (2.25/2.75)) *t +. 9375) + b; }Else {                returnc* (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 returnTween.Bounce.easeOut (t*2-d, 0, C, D) *. 5 + c*.5 +b; }    } }
JS Motion Frame Tween