浅谈Javascript中匀速运动的停止条件


Posted in Javascript onDecember 19, 2014

我们先来看下之前的匀速运动的代码,修改了速度speed后会出现怎么样的一个bug。这里加了两个标杆用于测试

<style type="text/css">

            #div1 {

                width: 100px;

                height: 100px;

                position: absolute;

                background: red;

                top: 50px;

                left: 600px;

            }

            #div2 {

                width: 1px;

                height: 300px;

                position: absolute;

                left: 300px;

                top: 0;

                background: black;

            }

            #div3 {

                width: 1px;

                height: 300px;

                position: absolute;

                left: 100px;

                top: 0;

                background: black;

            }

        </style>

        <script type="text/javascript">

            var time = null;

            function startMove(iTarget) {

                var oDiv = document.getElementById("div1");

                clearInterval(time);

                time = setInterval(function() {

                    var speed = 0;

                    if (oDiv.offsetLeft < iTarget) {

                        speed = 7;

                    } else {

                        speed = -7;

                    }

                    // 其实这种情况是有问题的

                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';

                    

                }, 30)

            }

        </script>

    </head>

    <body>

        <input type="button" id="btn" value="到100" onclick="startMove(100)" />

        <input type="button" id="btn" value="到300" onclick="startMove(300)" />

        <div id="div1">

        </div>

        <div id="div2">

        </div>

        <div id="div3">

        </div>

    </body>

其实这样的代码如果把速度改成7这种奇数,而到达目标点却是一个整数,这样就会出现未能达目标点或超过目标点来回抖动的bug

浅谈Javascript中匀速运动的停止条件

那为什么会出现这种情况呢 ?

实际上来说他到达目标点的时候无法精确到目标点,若目标点是100,每次走7个,这个时候他要么就是过了目标点,要么就是没过。

永远到不了目标点。其实帮之前的缓冲有点像。

那么到底怎么算才是到达了目标点呢?

举个例子 : 你打车到某个地方,司机肯定是到哪里差不多离个10米20米就停下来了,就算到了。不可能要求汽车贴到那个地方停下来吧。

所以说呢,其实来讲程序也是一样的,我们只要物体和目标点之间的距离近到一定的程度,就不需要再近了,就认为到了。

我们看下修改后的代码:

<script type="text/javascript">

            var time = null;
            function startMove(iTarget) {

                var oDiv = document.getElementById("div1");

                clearInterval(time);

                time = setInterval(function() {

                    var speed = 0;

                    if (oDiv.offsetLeft < iTarget) {

                        speed = 7;

                    } else {

                        speed = -7;

                    }

                    if (Math.abs(iTarget - oDiv.offsetLeft) <= 7) {

                        clearInterval(time);

                        oDiv.style.left=iTarget+'px';

                    } else {

                        oDiv.style.left = oDiv.offsetLeft + speed + 'px';

                    }

                    

                }, 30)

            }

        </script>

解释一下: 这里为什么要用 Math.abs 取绝对值呢?

理由很简单,因为速度可能是正的可能是负的。

现在我们让目标和物体之间的距离只要小于等7, 那就算到了。为什么是7呢? 因为他下一次的运动都不足7个了。这个时候我们就算他到了目标点了。

那现在问题又来了, 这样写 他并没有精确的停在目标点的位置。所以我们加了一句简单的话,直接让left 等于目标点。oDiv.style.left=iTarget+'px';

实际上最后一次走的不足7个,但是大家都知道程序这个运行的太快了,人眼是看不出来的。热烈的笑脸

这个时候就没有问题了。眨眼

这个就是匀速运动的停止条件。 那有朋友问,为什么缓冲运动没有这么麻烦呢?

因为他的速度是变的,越来越小,直到最后他甚至就到达1了,一步一步往前肯定不会出现这样的问题。

Javascript 相关文章推荐
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 #Javascript
Javascript添加监听与删除监听用法详解
Dec 19 #Javascript
Javascript 实现图片无缝滚动
Dec 19 #Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 #Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 #Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 #Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 #Javascript
You might like
PHP安全编程之加密功能
2006/10/09 PHP
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
php加密解密字符串示例
2016/10/13 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
vue跨域解决方法
2017/10/15 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
JS实现点击掉落特效
2021/01/29 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
Python使用MONGODB入门实例
2015/05/11 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
经理职责范文
2013/11/08 职场文书
校长岗位职责
2013/11/26 职场文书
如何写好升职自荐信
2014/01/06 职场文书
内衣营销方案
2014/03/15 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
党员个人承诺书
2015/04/27 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
新学期感想
2015/08/10 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL