JavaScript运动框架之如何解决速度正负取整问题（一）-js教程-PHP中文网

首页

web前端

js教程

JavaScript运动框架之如何解决速度正负取整问题（一）

黄舟

May 21, 2017 pm 01:20 PM

javascript

这篇文章主要为大家详细介绍了JavaScript运动框架的第一部分，解决速度正负取整问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

这里说的运动是指缓冲运动，缓冲运动会使物体逐渐‘着陆'，而不是‘硬着陆'，到达目标位置的过程中速度越来越慢，看起来很舒服。

缓冲的特点：

速度随着距离的缩短而降低
速度 = （目标值 - 当前值） / 缩放系数；
速度一定要是整数

比如，一个p从最左边运动到left等于400的位置停下，可以如下实现：

<!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>

这里写图片描述

你会发现，启动按钮之后，p并没有准确到达400的位置，再看看title上打印的实际目标和速度，我们发现最终落脚点是396，速度为0.4，我们知道：1px是最小单位，没有小数的概念，所以0.4px是没有的概念，会被计算机认为是0px，仔细分析，当p运行到396px的时候，还剩下4px，速度为4/10 = 0.4，下一个单位时间（30ms）向前运行0.4px，实际上是0，所以永远的停下来了，而且永远不会执行清除定时器这一步！
怎么解决，Math中有个方法叫向上取整，也就是让速度取整，向上取整，努力帮助p跨过这一步

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

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);
}

这里写图片描述

当然了，p除了可以正向运动，也可以负向运动，比如，从800运动到400.
如果不取整的话，依旧不能准确到达400。

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

这里写图片描述

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);
}

这里写图片描述

总结：

正向运动（速度 > 0）, Math.ceil(speed);
反向运动（速度 < 0）, Math.floor(speed);

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

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);
}

速度取整，是为了最后时刻速度（绝对值）变大，跨过那一槛，不然只能停留在附近！

如果速度不取整，最后的结果就是停在目标值附近，还差几个像素，这个值最后算出来的速度的绝对值肯定小于1，导致还差几像素跨不过去了，如果你这时候让速度取整达到1，最后几个像素的距离其实就是匀速前行了，每次（30ms）都行走1px，因为最后几次都速度算出来都是1，1px 1px的行走到目的地！

以上是JavaScript运动框架之如何解决速度正负取整问题（一）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Java vs JavaScript：开发人员的详细比较May 16, 2025 am 12:01 AM

javaandjavascriptaredistinctlanguages：javaisusedforenterpriseandmobileapps，while javascriptifforInteractiveWebpages.1）JavaisComcompoppored，statieldinglationallyTypted，statilly tater astrunsonjvm.2）

JavaScript数据类型：浏览器和nodejs之间是否有区别？May 14, 2025 am 12:15 AM

JavaScript核心数据类型在浏览器和Node.js中一致，但处理方式和额外类型有所不同。1)全局对象在浏览器中为window，在Node.js中为global。2)Node.js独有Buffer对象，用于处理二进制数据。3)性能和时间处理在两者间也有差异，需根据环境调整代码。

JavaScript评论：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。