Easing effect implementation program in JavaScript

There are four kinds of common animations, which are introduced:
Linear: Linear animation, that is, uniform
Easein: Speed from small to large, that is, fade in
Easeout: Speed from big to small, that is, fade out
Easeinout: Start from small to large, at the end of the speed from big to little, that is, fade in

In fact, when it comes to ease, you have to mention Robert Penner, who invented the N-multiple easing formula, for example.

Let me explain:
Set the current change to X, the
t/d = x/c, so x = c * t/d, then x + B can get the current property value

Look at a slightly more complicated one:

This has a fade in effect, that is, when the animation began, the value of the change in size from small to large.
You can see that the only difference between the two is t/d and (T/= D) * t, which just said T/d is a >=0 && <=1 ratio, which is named A, and (T/= D) * t is equivalent to Math.pow (A, 2).

Why do we have to square?
1. First a >= Math.pow (A, 2) is certain
2. Each time the function is invoked, t/d this ratio is also constant size, such as the 1th call is 0.1 (square 0.01), the 2nd call is 0.2 (square 0.04), and so on, the 10th call, it must be 1 yes, this time c * 1 + B, the animation is over
3. The 2nd proves the smaller the ratio, the smaller the value change, the greater the ratio, the greater the value of the change, if not square but three times, the fade effect is more obvious.

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

The code is as follows

Copy Code

<style> #container {width:500px;height:100px;border:1px #d1d1d1 solid;position:relative} #drag {width:100px;height:100px;background: #369;p osition: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 starting position and the end position and the step size, each time adding a fixed value until the termination condition var timer = null; var begin = 0, end = N, 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 uniform, the distance of each movement is fixed, the following is another way to realize:

The code is as follows	Copy Code
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 above method computes the step of the displacement by the distance from the current position to the target.
In Flash, there are class tween that handle easing, and the code that translates to JavaScript is:

The code is as follows

Copy Code

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, * (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, * (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)) + 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 +.) + 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; } } }

Each of these easing modes corresponds to 3 different types
Easein: Accelerated easing starting from 0;
Easeout: Slowing down to 0 of the slow motion;
Easeinout: The first half is accelerated from 0 and the second half slows down to 0.
Parameter description:
T: Current time
B: Initial value
C: The amount of change
D: Duration
Call Mode:

code is as follows	copy code
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);