How to solve the problem of positive and negative speed rounding in JavaScript motion framework (1)-JS Tutorial-php.cn

How to solve the problem of positive and negative speed rounding in JavaScript motion framework (1)

黄舟

Release： 2017-05-21 13:20:16

Original

1707 people have browsed it

This article mainly introduces the first part of JavaScriptMotionFramework to everyone in detail, which solves the problem of positive and negative speed rounding. It has certain reference value for interested friends. We can refer to

The movement mentioned here refers to the buffering movement. The buffering movement will make the object gradually 'land' instead of 'hard landing'. The speed becomes slower and slower in the process of reaching the target position, which looks very fast. Comfortable.

Characteristics of buffering:

The speed decreases as the distance shortens
Speed = (target value - current value ) / Scaling coefficient;
The speed must be an integer

For example, a p moves from the far left Stop when left is equal to 400, which can be achieved as follows:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>运动框架（一）</title>
 <style type="text/css">
  * {
   padding: 0;
   margin: 0;
  }
  #p1 {
   width: 100px;
   height: 100px;
   background: orange;
   position: absolute;
  }
  #p2 {
   width: 1px;
   height: 300px;
   background: black;
   position: absolute;
   left: 400px;
  }
  #btn1 {
   width: 60px;
   height: 40px;
   background: #fff;
   position: absolute;
   left: 10px;
   top: 150px;
  }
 </style>
</head>
<body>
 <p id="p1"></p>
 <p id="p2"></p>
 <input id="btn1" type="button" value="start" onclick="startMove()" />
 <script type="text/javascript">
  var op = document.getElementById(&#39;p1&#39;);
  var oBtn = document.getElementById(&#39;btn1&#39;);
  var timer = null;
  function startMove() {
   /* 每次启动定时器应该把上次的定时器清理掉，
    因为有的人会多次点击按钮，多次启动定时器，速度会叠加越来越快！
   */
   clearInterval(timer);
   timer = setInterval(function() {
    //每次速度都随着距离的缩短而变慢
    var speed = (400 - op.offsetLeft) / 10;
    if (op.offsetLeft == 400) {
     clearInterval(timer); 
    } else {
     op.style.left = op.offsetLeft + speed + &#39;px&#39;;
     document.title = op.offsetLeft + &#39; , &#39; + speed;
    }
   }, 30);
  }
 </script>
</body>
</html>

Copy after login

How to solve the problem of positive and negative speed rounding in JavaScript motion framework (1)

##You will find that after starting the button, p is not accurate After reaching the position of 400, and looking at the actual target and speed printed on the title, we find that the final destination is 396 and the speed is 0.4. We know: 1px is the smallest unit and there is no concept of decimals, so 0.4px is a concept that does not exist. It will be considered as 0px by the computer. After careful analysis, when p runs to 396px, there are still 4px left, and the speed is 4/10 = 0.4. The next unit time (30ms) runs forward 0.4px, which is actually 0, so It stops forever, and the step of clearing the timer will never be executed!

How to solve it? There is a method in Math called rounding up, which is to let the speed be rounded up, and try to help p cross this step

Math.ceil(3.2) ==> 4
Math.ceil(-9.7) ==> -9
Math.floor(5.98) ==> 5

Copy after login

function startMove() {
 clearInterval(timer);
 timer = setInterval(function() {
  var speed = (400 - op.offsetLeft) / 10;
  speed = Math.ceil(speed);//划重点，划重点
  if (op.offsetLeft == 400) {
   clearInterval(timer);
  } else {
   op.style.left = op.offsetLeft + speed + &#39;px&#39;;
   document.title = op.offsetLeft + &#39; , &#39; + speed;
  }
 }, 30);
}

Copy after login

How to solve the problem of positive and negative speed rounding in JavaScript motion framework (1)

Of course, p can not only move in the positive direction, but also in the negative direction, for example, from 800 to 400.

If not rounded If so, it still cannot reach 400 accurately.

#p1 {
 width: 100px;
 height: 100px;
 background: orange;
 position: absolute;
 left: 800px;/*0 --> 800*/
}

Copy after login

How to solve the problem of positive and negative speed rounding in JavaScript motion framework (1)

function startMove() {
 clearInterval(timer);
 timer = setInterval(function() {
  var speed = (400 - op.offsetLeft) / 10;
  console.log(&#39;speed = &#39; + speed);
  speed = Math.floor(speed);//划重点，划重点，划重点
  if (op.offsetLeft == 400) {
   clearInterval(timer);
  } else {
   op.style.left = op.offsetLeft + speed + &#39;px&#39;;
   document.title = op.offsetLeft + &#39; , &#39; + speed;
  }
 }, 30);
}

Copy after login

How to solve the problem of positive and negative speed rounding in JavaScript motion framework (1) ##Summary:

Forward motion (speed > 0), Math.ceil(speed);
Reverse motion (speed < 0), Math.floor(speed);

var speed = (iTarget - cur) / 系数;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

Copy after login

function startMove(iTarget) {
 setInterval(function() {
  var speed = (iTarget- op.offsetLeft) / 10;
  speed = speed > 0 ? Math.ceil(speed) : Match.floor(speed);
  op.style.left = op.offsetLeft + speed + &#39;px&#39;;
 }, 30);
}

Copy after login

The speed is rounded so that the speed (absolute value) becomes larger at the last moment and crosses that threshold, otherwise it can only stay nearby!

If the speed is not rounded, the final result will be to stop near the target value, which is still a few pixels short. The absolute value of the speed finally calculated from this value must be less than 1, resulting in a few pixels short of being able to cross. Now, if you let the speed round to 1 at this time, the distance of the last few pixels is actually moving forward at a constant speed, walking 1px every time (30ms), because the speed calculated for the last few times is 1, 1px 1px Walk to your destination!

The above is the detailed content of How to solve the problem of positive and negative speed rounding in JavaScript motion framework (1). For more information, please follow other related articles on the PHP Chinese website!