浅谈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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
javascript 用函数实现继承详解
May 28 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
js new Date()实例测试
Oct 31 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中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
php静态文件生成类实例分析
2015/01/03 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
php获取linux命令结果的实例
2017/03/13 PHP
PHP实现计算器小功能
2020/08/28 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
python实现2048小游戏
2015/03/30 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
PyTorch中permute的用法详解
2019/12/30 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
初任培训自我鉴定
2013/10/07 职场文书
打架检讨书800字
2014/01/10 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
客户答谢会致辞
2015/01/20 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android