JavaScript Animation algorithm example Analysis _javascript skill

This example describes the JavaScript animation algorithm. Share to everyone for your reference. Specifically as follows:

Animation algorithm

Linear: No easing effect (uniform motion);
Quadratic: Two of the second side of the slow motion;
Cubic: Three second side of the slow motion
Quartic: Four of the second side of the slow motion;
Quintic: Five of the second side of the slow motion;
Sinusoidal: The slow motion of sine curve;
Exponential: Slow motion of exponential curve;
Circular: The slow motion of the circular curve;
Elastic: Exponential attenuation of sinusoidal curve easing;
Back: Over the range of three-second side easing;
Bounce: Exponential attenuation of the rebound slow motion.

Each effect is divided into three easing modes (methods), respectively:

Easein: Accelerated movement starting from 0;
Easeout: The movement that slows down to 0;
Easeinout: The first half accelerates from 0 and the second half slows down to 0 of the movement.

The four parameters of the function represent:

T---current time;
b---Beginning value (initial value);
c---change in value (variation);
d---duration (duration)

The result of the operation is the current motion distance.

Tween.js is as follows:

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;

 }
 }
}

The

wants this article to help you with your JavaScript programming.