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

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程

1677

CakePHP 教程

1430

Laravel 教程

1333

PHP教程

1278

C# 教程

1257

显示更多

Related knowledge

WebSocket与JavaScript：实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技

如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍：随着互联网的普及和技术的进步，越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统，我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议，可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中，当用户选择菜品并下单

如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代，越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统，并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

JavaScript和WebSocket：打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的实时天气预报系统引言：如今，天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展，我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中，我们将学习如何使用JavaScript和WebSocket技术，来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

简易JavaScript教程：获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest

javascript中如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法：在JavaScript中，insertBefore()方法用于在DOM树中插入一个新的节点。这个方法需要两个参数：要插入的新节点和参考节点（即新节点将要被插入的位置的节点）。

如何在JavaScript中获取HTTP状态码的简单方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP状态码获取方法简介：在进行前端开发中，我们常常需要处理与后端接口的交互，而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法，并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时，服务

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题