The JavaScript motion framework solves the problem of speed plus and minus INTEGER (1). javascript is rounded up.

The JavaScript motion framework solves the problem of speed plus and minus INTEGER (1). javascript is rounded up.

The Movement mentioned here refers to the buffering movement. The buffering movement gradually makes the object "land", rather than "hard landing". The process of reaching the target position slows down and looks comfortable.

Buffering features:

• Speed decreases as distance decreases
• Speed = (target value-current value)/scaling factor;
• The speed must be an integer.
  

For example, to stop a div moving from the leftmost to the position where left is equal to 400, You can implement the following:

<! DOCTYPE html> 


You will find that after the start button, the div does not reach the correct position of 400. Then, let's look at the actual goal and speed of printing on the title. We find that the final goal is 396, and the speed is 0.4, we know that 1px is the smallest unit, and there is no decimal concept, so 0.4px is the concept that will be regarded by the computer as 0px. After careful analysis, when div runs to pixel PX, there is still 4 PX left, the speed is 4/10 = 0.4, And the next unit time (30 ms) runs 0.4px forward, which is actually 0, so it will stop forever and will never be executed to clear the timer!
How to solve this problem, there is a method in Math that is, to get the rounded up speed, and to get the rounded up, and try to help div cross this step
Math.ceil(3.2) ==> 4Math.ceil(-9.7) ==> -9Math.floor(5.98) ==> 5
Function startMove () {clearInterval (timer); timer = setInterval (function () {var speed = (400-oDiv. offsetLeft)/10; speed = Math. ceil (speed); // specifies the key. if (oDiv. offsetLeft = 400) {clearInterval (timer);} else {oDiv. style. left = oDiv. offsetLeft + speed + 'px '; document. title = oDiv. offsetLeft + ',' + speed ;}, 30 );}

Of course, in addition to positive motion, div can also be negative, for example, from 800 to 400.
If not rounded up, it still cannot reach 400.
#div1 { width: 100px; height: 100px; background: orange; position: absolute; left: 800px;/*0 --> 800*/}

Function startMove () {clearInterval (timer); timer = setInterval (function () {var speed = (400-oDiv. offsetLeft)/10; console. log ('speed = '+ speed); speed = Math. floor (speed); // specifies the key, if (oDiv. offsetLeft = 400) {clearInterval (timer);} else {oDiv. style. left = oDiv. offsetLeft + speed + 'px '; document. title = oDiv. offsetLeft + ',' + speed ;}, 30 );}

Summary:

Forward motion (speed> 0), Math. ceil (speed );
Reverse motion (speed <0), Math. floor (speed );
Var speed = (iTarget-cur)/coefficient; speed = speed> 0? Math. ceil (speed): Math. floor (speed );
function startMove(iTarget) { setInterval(function() {  var speed = (iTarget- oDiv.offsetLeft) / 10;  speed = speed > 0 ? Math.ceil(speed) : Match.floor(speed);  oDiv.style.left = oDiv.offsetLeft + speed + 'px'; }, 30);}
The speed is rounded up to increase the speed (absolute value) at the last moment. You can only stay near the nearest shard!
If the speed is not rounded up, the final result is to stop near the target value, and there are several pixels behind it. The absolute value of the final calculated speed must be less than 1, resulting in several pixels not to be crossed, if you set the speed to 1 at this time, the distance between the last few pixels is actually moving forward at a constant speed, and every time (30 ms) You walk 1 px, because the last few times the speed is calculated as 1, 1px and 1px to the destination!
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.