Examples of javascript animation algorithms and javascript examples

Source: Internet
Author: User
Tags asin

Examples of javascript animation algorithms and javascript examples

This example describes the javascript animation algorithm. Share it with you for your reference. The details are as follows:

Animation Algorithm

Linear: no easing effect (constant speed );
Quadratic: Quadratic easing;
Cubic: Three-power easing
Quartic;
Quintic: 5-power easing;
Sinusoidal: easing of the sine curve;
Exponential: easing of the Exponential curve;
Circular: the easing of a Circular curve;
Elastic: exponential decay of the sine curve;
Back: The cubic power that exceeds the range );
Bounce: the rebound of exponential attenuation slows down.

Each effect is divided into three easing modes (methods:

EaseIn: the accelerated motion starting from 0;
EaseOut: the movement that slows down to 0;
EaseInOut: the first half starts to accelerate from 0, and the second half slows down to 0.

The four parameters of the function are:

T --- current time (current time );
B --- beginning value (initial value );
C --- change in value (change volume );
D --- duration (duration)

The calculation result is the current moving 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, 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/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)*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*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;  } }}

I hope this article will help you design javascript programs.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.