JS elastic motion implementation method and instance code

This article describes how to implement JS elastic motion. We will share this with you for your reference. The details are as follows:

Description: it is like a spring, and finally it stops slowly.

I. Acceleration and deceleration

1. Acceleration

1 2	VariSpeed = 0; ISpeed ++;

The speed is getting faster and faster.

2. Deceleration

VariSpeed = 20; ISpeed --;

The speed is getting slower and slower. When it drops to 0, it starts to change to negative.

II. Elastic movement

1. On the left of the target point, accelerate; on the right of the target point, slow down, as shown in figure

If (div1.offsetLeft <300 ){ ISpeed = iSpeed + 1; // equivalent to iSpeed ++; } Else { ISpeed = iSpeed-1; }

This is the simplest elastic movement, defect: constant acceleration (should be changed based on 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;

The two are identical, so if/else is not required.

ISpeed + = (300-div1.offsetLeft)/50; Div1.style. left = div1.offsetLeft + iSpeed + 'px ';

Defect 2: does not stop (lack of friction)

ISpeed + = (300-div1.offsetLeft)/50; ISpeed * = 0.95; // multiply by a decimal number, getting smaller and smaller Div1.style. left = div1.offsetLeft + iSpeed + 'px ';

III. Elastic movement with friction

Better combination

ISpeed + = (300-div1.offsetLeft)/5; ISpeed * = 0.7;

Note: var iSpeed = 0; it should be placed outside the timer, or it will start from 0 every time. Adding and multiplication will be useless.

IV. Integrated elastic movement framework

VariSpeed = 0; Varleft = 0; FunctionstartMove (obj, iTarget ){ ClearInterval (obj. timer ); Obj. timer = setInterval (function (){ ISpeed + = (iTarget-obj.offsetLeft)/5; ISpeed * = 0.7; // The calculated speed is a decimal point. If you give it an integer, it will always move left and right Left + = iSpeed; // store the speed in the variable. The variable can have decimal places. If (Math. abs (iSpeed) <1 & Math. abs (left-iTarget) <1) {// because iSpeed and left are decimal places, they can never reach 0 or the target point and can only be infinitely close ClearInterval (obj. timer); // although the speed is close to 0 at the end, it seems that the motion is stopped, but the timer is still on, so when the speed = 0 and reaches the target point, turn it off (only when the speed = 0, when the movement arrives at the rightmost and is ready to return, the speed is equal to 0. Similarly, it is only when the target point is reached, and the start of the movement to the right will reach the target point, so both must be satisfied at the same time) Obj. style. left = iTarget + 'px '; // The decimal point cannot be completely fit. Therefore, the object is directly equal to the target point.   } Else { Obj. style. left = left + 'px '; // style. left can only be an integer, so each time the decimal number is erased, the error is accumulated, and then 1-2 pixels will be accumulated, with obj. offsetLeft + iSpeed won't fully fit   } }, 30 ); };

5. Areas where auto scaling is not applicable

Style will pass through the border

For example, the height increases first and then decreases. If the height of an object is small, it may become a negative value.