脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js解决速度正负取整问题

JavaScript运动框架 解决速度正负取整问题(一)

 更新时间：2022年05月08日 10:46:54   作者：GY_U_YG  
这篇文章主要为大家详细介绍了JavaScript运动框架的第一部分，解决速度正负取整问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

缓冲的特点：

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

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

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

这里写图片描述

这里写图片描述

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

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 - oDiv.offsetLeft) / 10;
  speed = Math.ceil(speed);//划重点，划重点
  if (oDiv.offsetLeft == 400) {
   clearInterval(timer);
  } else {
   oDiv.style.left = oDiv.offsetLeft + speed + 'px';
   document.title = oDiv.offsetLeft + ' , ' + speed;
  }
 }, 30);
}

这里写图片描述

当然了，div除了可以正向运动，也可以负向运动，比如，从800运动到400.
如果不取整的话，依旧不能准确到达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);//划重点，划重点，划重点
  if (oDiv.offsetLeft == 400) {
   clearInterval(timer);
  } else {
   oDiv.style.left = oDiv.offsetLeft + speed + 'px';
   document.title = oDiv.offsetLeft + ' , ' + 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- oDiv.offsetLeft) / 10;
  speed = speed > 0 ? Math.ceil(speed) : Match.floor(speed);
  oDiv.style.left = oDiv.offsetLeft + speed + 'px';
 }, 30);
}

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript中的垃圾回收与内存泄漏示例详解

    JavaScript中的垃圾回收与内存泄漏示例详解

    这篇文章主要给大家介绍了关于JavaScript中垃圾回收与内存泄漏的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-05-05
  • 基于javascript原生判断DOM是否加载完毕

    基于javascript原生判断DOM是否加载完毕

    这篇文章主要介绍了基于javascript原生判断DOM是否加载完毕,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • BootStrap Fileinput初始化时的一些参数

    BootStrap Fileinput初始化时的一些参数

    本文通过一个例子给大家简单介绍了bootstrap fileinput初始化时的一些参数，非常不错，具有参考借鉴价值，需要的朋友参考下
    2016-12-12
  • JavaScript基础之流程控制语句的用法

    JavaScript基础之流程控制语句的用法

    下面就为大家带来一篇JavaScript基础之流程控制语句的用法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • js如何获取对象在数组中的index

    js如何获取对象在数组中的index

    这篇文章主要介绍了js如何获取对象在数组中的index，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • JS继承用法实例分析

    JS继承用法实例分析

    这篇文章主要介绍了JS继承用法,实例分析了拷贝继承、类继承及原型继承等的使用技巧,需要的朋友可以参考下
    2015-02-02
  • 人人网javascript面试题 可以提前实现下

    人人网javascript面试题 可以提前实现下

    JavaScript面试题要求：以下题目必须从一至四题中，选出三道题，使用原生代码实现，不可使用任何框架，第五题为选作题
    2012-01-01
  • 微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)

    微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)

    这篇文章主要介绍了微信小程序MUI导航栏透明渐变功能,结合实例形式分析了通过改变rgba的a值实现透明度渐变功能的相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • 详解js中的几种常用设计模式

    详解js中的几种常用设计模式

    这篇文章主要介绍了js中的几种设计模式，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
    2020-07-07
  • JS中精巧的自动柯里化实现方法

    JS中精巧的自动柯里化实现方法

    给大家详细分析了JS中精巧的自动柯里化实现方法并通过代码实例分析了过程和原理，参考学习下吧。
    2017-12-12

最新评论