浅谈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 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
angular.js实现购物车功能
Oct 23 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 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
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
改变Apache端口等配置修改方法
2008/06/05 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
PHP面向对象精要总结
2014/11/07 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
PHP7匿名类用法分析
2016/09/26 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
javascript的BOM汇总
2015/07/16 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
python django 实现验证码的功能实例代码
2017/05/18 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
使用Django清空数据库并重新生成
2020/04/03 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
Django多个app urls配置代码实例
2020/11/26 Python
杭州联环马网络笔试题面试题
2013/08/04 面试题
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
Servlet的生命周期
2013/08/25 面试题
工商管理专业应届生求职信
2013/11/04 职场文书
超市促销活动方案
2014/03/05 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书