Analysis of _javascript techniques for the realization of JS elastic motion

In this paper, the realization method of JS elastic motion is analyzed. Share to everyone for your reference, specific as follows:

Description: Bounce around like a spring, then stop slowly

I. Acceleration and deceleration movement

1. Accelerated movement

var ispeed=0;
ispeed++;

Faster and faster, and finally rushed out

2. Deceleration movement

var ispeed=20;
ispeed--;

The speed is slowing down to 0 and starting to turn negative and move in the opposite direction.

Second, the elastic movement

1. To the left of the target point, acceleration, the right of the target point, deceleration, such as

if (div1.offsetleft<300) {
 ispeed=ispeed+1;  equivalent to ispeed++;
}
else{
 ispeed=ispeed-1;
}

This is the simplest elastic movement, the flaw: the acceleration is constant (should be changed according to the elastic band)

if (div1.offsetleft<300) {
 ispeed=ispeed+ (300-div1.offsetleft)/50; 
}
else{
 ispeed=ispeed-(div1.offsetleft-300)/50;
}
Ispeed=ispeed+ (300-div1.offsetleft)/50; ==>ispeed=ispeed+300/50-div1.offsetleft/50;
ispeed=ispeed-(div1.offsetleft-300)/50; ==>ispeed=ispeed-div1.offsetleft/50+300/50;

These two are exactly the same, so they don't need if/else.

ispeed+= (300-div1.offsetleft)/50; 
div1.style.left=div1.offsetleft+ispeed+ ' px ';

Defect 2: Will not stop (lack of friction)

ispeed+= (300-div1.offsetleft)/50; 
ispeed*=0.95; Multiply by a decimal, more and more small
div1.style.left=div1.offsetleft+ispeed+ ' px ';

Elastic motion with frictional force

A better combination

ispeed+= (300-div1.offsetleft)/5; 
ispeed*=0.7;

Note: Var ispeed=0; to be placed outside the timer, or every time starting from 0, add ah multiply ah is useless

Iv. Integrating a good elastic motion frame

var ispeed=0;
var left=0;
function Startmove (obj,itarget) {
 clearinterval (obj.timer);
 Obj.timer=setinterval (function () {
  ispeed+= (itarget-obj.offsetleft)/5;
  ispeed*=0.7;  The calculated speed is a decimal, if you give it to the whole, will always move around
  left+=ispeed;  To put the velocity in a variable, a variable can have a decimal number
  if (Math.Abs (ispeed) <1 && math.abs (left-itarget) <1) {//Because ispeed and left are decimals, So never reach 0 and Target point, can only infinity close to
   clearinterval (Obj.timer);  Although the speed was finally close to 0, the movement seemed to stop, but the timer is still open, so when the speed =0 and reach the target point, turn off (just the speed =0 off, movement to the right side ready to come back that moment, speed = 0, the same as only to reach the target point off, the first move to the right after the middle will reach the target point, So must both satisfy)
   obj.style.left=itarget+ ' px ';//decimal can not fully fit, so the last direct let him equal to the target point, the general human eye can not see it
  else{
   obj.style.left=left+ ' px ';  Style.left can only be an integer, so each time the decimal will be erased, the error is cumulative, eventually add up will have 1-2 pixels, with obj.offsetleft+ispeed will not fully fit
  }
 },30;
};

Where the elastic movement does not apply

The style will cross the border.

such as height, first become small, if the object itself is very small, may become negative, it is wrong

For more information on JavaScript-related content readers can view the site topics: "JavaScript movement effect and Skills summary", "JavaScript switching effects and techniques summary", "JavaScript Search Algorithm Skills summary", " JavaScript animation effects and tips Summary, "JavaScript Error and debugging skills Summary", "JavaScript data structure and algorithm skills summary", "JavaScript traversal algorithm and Skills summary" and "JavaScript Mathematical operation Usage Summary"

I hope this article will help you with JavaScript programming.