Analysis of JS elastic motion implementation method

This paper analyzes the JS elastic motion implementation method in an example. Share it for your reference, as follows:

Description: Bounce left and right like a spring, and finally stop slowly

1. Acceleration and deceleration movement

1. Accelerate movement

var iSpeed=0;
iSpeed++;

Speed ​​gets faster and finally rush out

2. Reduce exercise

var iSpeed=20;
iSpeed--;

The speed is getting slower and slower, and after dropping to 0, it starts to move in the opposite direction.

2. Elastic motion

1. On the left side of the target point, accelerate; on the right side of the target point, slow down, such as

if(<300){
 iSpeed=iSpeed+1;  //Equivalent to iSpeed++;}
else{
 iSpeed=iSpeed-1;
}

This is the simplest elastic motion, defect: constant acceleration (should vary according to elastic band)

if(<300){
 iSpeed=iSpeed+()/50; 
}
else{
 iSpeed=iSpeed-(-300)/50;
}
iSpeed=iSpeed+()/50; ==>iSpeed=iSpeed+300//50;
iSpeed=iSpeed-(-300)/50; ==>iSpeed=/50+300/50;

These two are exactly the same so there is no need for if/else

iSpeed+=()/50; 
=+iSpeed+'px';

Defect 2: Not stopping (missing friction)

iSpeed+=()/50; 
iSpeed*=0.95; //Multiply a decimal, it will get smaller and smaller=+iSpeed+'px';

3. Elastic motion with friction

A better combination

iSpeed+=()/5; 
iSpeed*=0.7;

Note: var iSpeed=0; put it outside the timer, otherwise it will start from 0 every time, and adding and multiplying will be useless.

4. Integrated elastic motion frame

var iSpeed=0;
var left=0;
function startMove(obj,iTarget){
 clearInterval();
 =setInterval(function(){
  iSpeed+=()/5;
  iSpeed*=0.7;  //The calculated speed is a decimal. If you round it, it will move left and right.  left+=iSpeed;  //Storing the speed in a variable can have decimals  if((iSpeed)<1 && (left-iTarget)<1){ //Because iSpeed ​​and left are both decimals, it will never reach 0 and the target point, and it can only be infinitely close   clearInterval();  //Although the speed finally approaches 0, and the movement seems to have stopped, the timer is still on, so when the speed = 0 and reaches the target point, turn it off (just the speed = 0, turn it off, move to the far right and prepare to come back, speed = 0, same is true, just reach the target point and turn it off. When you move to the right first, you will reach the target point, so both must be satisfied at the same time)   =iTarget+'px'; //The decimal cannot be fully fit, so in the end, it is directly equal to the target point, which is not visible to ordinary people with the naked eye.  }
  else{
   =left+'px';  //It can only be an integer, so the decimal will be erased every time. The error is accumulated, and the final accumulation will be 1-2 pixels. It will not be able to fit completely with +iSpeed ​​+  }
 },30);
};

5. Where elastic movement is not applicable

The style will cross the boundaries

For example, height, it will become larger first and then smaller. If the object itself is very small, it may become a negative value, which is wrong.

For more information about JavaScript, readers who are interested in reading this site's special topic:Summary of JavaScript's movement effects and techniques》、《Summary of JavaScript switching effects and techniques》、《Summary of JavaScript search algorithm skills》、《Summary of JavaScript animation special effects and techniques》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript mathematical operations usage》

I hope this article will be helpful to everyone's JavaScript programming.