浅谈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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
$()JS小技巧
Jul 21 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
浅谈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 时间日期操作实战
2011/08/26 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
javascript中Function类型详解
2015/04/28 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
python同时遍历两个list用法说明
2020/05/02 Python
python 制作简单的音乐播放器
2020/11/25 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
小学教师的自我评价范例
2013/10/31 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL