Easing effect implementation program in javascript_javascript skills-JS Tutorial-php.cn

Easing effect implementation program in javascript_javascript skills

WBOY

Release： 2016-05-16 17:44:54

Original

1030 people have browsed it

There are four common types of animations, let’s introduce them:
linear: linear animation, that is, constant speed
easeIn: speed from small to large, that is, fade in
easeOut: speed from large to small, that is, fade out
easeInOut: The speed is from small to large at the beginning, and the speed is from large to small at the end, that is, fade in and fade out

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

Let me explain it:

Suppose the current change amount is X, then
t / d = X / c, so X = c * t / d, and then Let’s look at a slightly more complicated one:

This has a fade-in effect, which means that when the animation starts, the value changes from small to large.
You can find that the only difference between the two is t / d and (t /= d) * t. I just said that t / d is a ratio of >=0 && <=1, temporarily named a, And (t /= d) * t is equivalent to Math.pow(a, 2).

Why square it?

1. First of all, a >= Math.pow(a, 2) is certain
2. Every time the function is called, the ratio of t / d also becomes larger at a constant speed, for example The first call is 0.1 (square 0.01), the second call is 0.2 (square 0.04), etc. Then the 10th call must be 1, right. At this time c * 1 b, the animation ends here Ended
3. Point 2 proves that the smaller the ratio, the smaller the change in value, and the larger the ratio, the greater the change in value. If square is not used but cubed, the fade-in effect will be more obvious. .
The style, structure and public functions are as follows:

Copy code The code is as follows:

First, start with the simplest: set the start position, end position and step size, each time Increase the fixed value until the termination condition

Copy code The 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"; 🎜> } 
 var timer = setInterval(run, 20);


The above method is constant speed, and the distance of each movement is fixed. Let’s look at another implementation method: 

Copy code

The 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";
                                                                                                                                                              >



The above method is to calculate the step length of the displacement based on the distance between the current position and the target. 
 There is a tween class in flash that specifically handles easing. The code converted into javascript is: 

Copy code

The 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*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;
 }
 }
} 

Each easing method corresponds to 3 types
easeIn: starting from 0 Easing of acceleration;
easeOut: easing of decelerating to 0;
easeInOut: easing of accelerating from 0 in the first half and decelerating to 0 in the second half.
Parameter description:
t: current Time
b: Initial value
c: Change amount
d: Duration
Calling method:

Copy code The 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   t ;
 }else{
 clearInterval(timer);
        }
 }
var timer = setInterval(run, 20); 