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


Posted in Javascript onMay 17, 2017

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

缓冲的特点:

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

比如,一个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>

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

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

你会发现,启动按钮之后,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);
}

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

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

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

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

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

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

总结:

正向运动(速度 > 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 相关文章推荐
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 Javascript
深入理解Commonjs规范及Node模块实现
May 17 #Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 #Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 #Javascript
Angular.JS中的this指向详解
May 17 #Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 #Javascript
JavaScript简单拖拽效果(1)
May 17 #Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 #Javascript
You might like
php字符串截取问题
2006/11/28 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
ThinkPHP模型详解
2015/07/27 PHP
一端时间轮换的广告
2006/06/26 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
搭建vue开发环境
2018/07/19 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
Python做简单的字符串匹配详解
2017/03/21 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
会计电算化专业个人的自我评价
2013/11/24 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书