Tween formula and four parameters

Tween's homepage is here: Http://createjs.com/tweenjs, there are quite a lot of open source projects;

Tween Formula 4 parameters

T:current Time (current)

B:beginning value (initial value)

C:change in value (amount of change)

D:duration (duration) return (target point)

varTween ={linear:function(T, B, C, D) {//constant Speed        returnC*T/D + b;}, EaseIn:function(T, B, C, D) {//Acceleration Curve        returnc* (T/=d) *t + b;}, EaseOut:function(T, B, C, D) {//Deceleration curve        return-c * (t/=d) * (t-2) + B;}, Easeboth:function(T, B, C, D) {//Accelerated deceleration curve        if((T/=D/2) < 1) {            returnC/2*t*t + b;        }        return-C/2 * ((--T) * (t-2)-1) + B;}, Easeinstrong:function(T, B, C, D) {//Plus acceleration curve        returnc* (T/=d) *t*t*t + b;}, Easeoutstrong:function(T, B, C, D) {//reduced deceleration curve        return-C * ((t=t/d-1) *t*t*t-1) + B;}, Easebothstrong:function(T, B, C, D) {//acceleration and deceleration curve        if((T/=D/2) < 1) {            returnC/2*t*t*t*t + b;        }        return-C/2 * ((t-=2) *t*t*t-2) + B;}, Elasticin:function(T, B, C, D, A, p) {//sinusoidal attenuation curve (bouncing into)        if(T = = 0) {             returnb; }        if((t/= d) = = 1) {returnB +C; }        if(!p) {p=d*0.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;}, Elasticout:function(T, B, C, D, A, p) {//sine enhancement curve (bouncing out)        if(T = = 0) {            returnb; }        if((t/= d) = = 1) {returnB +C; }        if(!p) {p=d*0.3; }        if(!a | | A <Math.Abs (c)) {a=C; vars = P/4; } Else {            vars = p/(2*math.pi) * Math.asin (c/a); }        returnA*math.pow (2,-10*t) * Math.sin ((t*d-s) * (2*MATH.PI)/p) + C + B;}, Elasticboth:function(T, B, C, D, A, p) {if(T = = 0) {            returnb; }        if((t/= d/2) = = 2 ) {            returnB +C; }        if(!p) {p= d* (0.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-0.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) *0.5 + C + B;}, Backin:function(T, B, C, D, s) {//Fallback acceleration (fallback fade in)        if(typeofs = = ' undefined ') {s= 1.70158; }        returnc* (T/=d) *t* ((s+1) *t-s) + B;}, Backout:function(T, B, C, D, s) {if(typeofs = = ' undefined ') {s= 3.70158;//the distance to retract        }        returnc* ((t=t/d-1) *t* ((s+1) *t + s) + 1) + B;}, Backboth:function(T, B, C, D, s) {if(typeofs = = ' 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;}, Bouncein:function(T, B, C, D) {//Pinball Damping (bouncing out of the ball)        returnc-tween[' Bounceout ' (d-t, 0, C, D) +b; }, Bounceout: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 + 0.75) + B; }Else if(T < (2.5/2.75)) {returnc* (7.5625* (t-= (2.25/2.75)) *t + 0.9375) + b;        }        returnc* (7.5625* (t-= (2.625/2.75)) *t + 0.984375) + b;}, Bounceboth:function(T, B, C, d) {if(T < D/2) {returntween[' Bouncein ' (t*2, 0, C, d) * 0.5 +b; }        returntween[' Bounceout ' (t*2-d, 0, C, d) * 0.5 + c*0.5 +b; }}

In the usual use of jquey or write motion effects are used according to the target end of the movement of the library, if you want to use the time-related movement to do, then you can change according to the perfect motion frame of miaov, the calculation of the speed of the process, the use of tween method to replace:

Remember to quote this JS <script src= "tween.js" ></script> <style type= "Text/css" >div{width:100px;            height:100px;            Position:absolute;            left:10px;            top:100px;        Background: #f00;        } div:hover{width:400px; }    </style>window.onload=function() {Move (Ediv,"Left", "+", "linear")        }        varGetStyle =function(el, prop) {returnwindow.getComputedStyle (EL) [prop]; }        varmove =function(EL, prop, dest, duration, FX) {varStart =NewDate (). GetTime (); varStartvalue =parsefloat (GetStyle (el, prop)); varChangeValue = dest-Startvalue; varTimer = SetInterval (function() {                //1: Current time new Date-start;                //2: initial value;                //3: The amount of change;                //4: Duration duration;                varValue = Tween[fx] (Newdate-start, Startvalue, ChangeValue, duration); if(prop = = = "Opacity") {El.style[prop]=value; }Else{El.style[prop]= value + "px"; }                if(NewDate () >=duration+start)                    {clearinterval (timer); if(prop = = = "Opacity") {El.style[prop]=dest; }Else{El.style[prop]= dest + "px"; }                }            },30);        }; varEdiv = document.getElementById ("div"); </script></body>
　　
Tween formula and four parameters