Implementation Program for easing effect in javascript

There are four types of common animations:
Linear: linear animation, that is, constant speed
EaseIn: the speed is from small to large, that is, Fade in.
EaseOut: The speed ranges from large to small, that is, fade out.
EaseInOut: the start time is from small to large, and the end time is from large to small, that is, fade in and out.

In fact, when it comes to easing, we have to mention Robert Penner. He invented the N-plus easing formula. For example

Let me explain:

If the current variation is set to X
T/d = X/c, so X = c * t/d, then X + B can get the current Attribute Value

Let's look at a more complex one:
 
This has a light effect. That is to say, when the animation starts, the value changes from small to large.
We can find that the only difference between the two is t/d and (t/= d) * t. Just now, t/d is a ratio of> = 0 & <= 1, the name is a, and (t/= d) * t is equivalent to Math. pow (a, 2 ).

Why square?

1. First a> = Math. pow (a, 2) is positive.
2. each time a function is called, the t/d ratio also increases at a constant speed. For example, the value of 1st calls is 0.1 (square 0.01), and the value of 2nd calls is 0.2 (square 0.04, the first call must be 1, right? At this time, c * 1 + B, the animation is over.
3. point 2nd proves that the smaller the ratio, the smaller the value variation. The larger the ratio, the larger the value variation. If square is not used but the power of three, then the effect is more obvious.

The style, structure, and common functions are as follows:

Copy codeThe Code is as follows:
<Style>
# Container {width: 500px; height: 100px; border: 1px # d1d1d1 solid; position: relative ;}
# Drag {width: 100px; height: 100px; background: #369; position: absolute; left: 0; top: 0 ;}
</Style>
<Div id = "container">
<Div id = "drag"> </div>
</Div>

<Script type = "text/javascript">
Function $ (id ){
Return typeof id = 'string '? Document. getElementById (id): id;
}
Function getStyle (el, styleProp ){
Return el. currentStyle? El. currentStyle [styleProp]: document. defaultView. getComputedStyle (el, null). getPropertyValue (styleProp );
}
</Script>

First, start with the simplest: Set the start position, end position, and step size, and add a fixed value each time until the termination conditions are met.
Copy codeThe Code is as follows:
Var timer = null;
Var begin = 0, end = 400, step = 5;
Var drag = $ ("drag ");
Function run (){
If (iLeft = parseInt (getStyle (drag, "left") <end ){
Drag. style. left = iLeft + step + "px ";
} Else {
ClearInterval (timer );
}
}
Var timer = setInterval (run, 20 );

The above method is a uniform speed, and the distance between each movement is fixed. Here is another implementation method:

Copy codeThe Code is as follows:
Var timer = null;
Var begin = 0, end = 400;
Var drag = $ ("drag ");
Function run (){
If (iLeft = parseInt (getStyle (drag, "left") <end ){
Var step = Math. ceil (400-iLeft)/7 );
Drag. style. left = iLeft + step + "px ";
} Else {
ClearInterval (timer );
}
}
Var timer = setInterval (run, 20 );

The preceding method calculates the step size of the current displacement based on the distance between the current position and the target.
In flash, there is a code specifically designed to handle the gentle tween class and convert it to javascript:

Copy codeThe Code is as follows:
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 + B;
Return-c/2 * (-- t) * (t-2)-1) + B;
}
},
Cubic :{
EaseIn: function (t, B, c, d ){
Return c * (t/= d) * t + B;
},
EaseOut: function (t, B, c, d ){
Return c * (t = t/D-1) * t + 1) + B;
},
EaseInOut: function (t, B, c, d ){
If (t/= d/2) <1) return c/2 * t + B;
Return c/2 * (t-= 2) * t + 2) + B;
}
},
Quart :{
EaseIn: function (t, B, c, d ){
Return c * (t/= d) * t + B;
},
EaseOut: function (t, B, c, d ){
Return-c * (t = t/D-1) * t-1) + B;
},
EaseInOut: function (t, B, c, d ){
If (t/= d/2) <1) return c/2 * t + B;
Return-c/2 * (t-= 2) * t-2) + B;
}
},
Quint :{
EaseIn: function (t, B, c, d ){
Return c * (t/= d) * t + B;
},
EaseOut: function (t, B, c, d ){
Return c * (t = t/D-1) * t + 1) + B;
},
EaseInOut: function (t, B, c, d ){
If (t/= d/2) <1) return c/2 * t + B;
Return c/2 * (t-= 2) * 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/);
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/);
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/);
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 * (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) + 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;
}
}
}

Three types are available for each easing method.
EaseIn: The acceleration starts from 0;
EaseOut: Slow down to 0;
EaseInOut: the first half starts to accelerate from 0, and the second half slows down to 0.
Parameter description:
T: Current Time
B: Initial Value
C: Change volume
D: Duration
Call method:

Copy codeThe Code is as follows:
Var timer = null;
Var B = 0, c = 400, d = 100, t = 0;
Var drag = $ ("drag ");
Function run (){
Drag. style. left = Math. ceil (Tween. Circ. easeInOut (t, B, c, d) + "px ";
If (t <d ){
T ++;
} Else {
ClearInterval (timer );
}
}
Var timer = setInterval (run, 20 );