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

我们先来看下之前的匀速运动的代码，修改了速度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

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

实际上来说他到达目标点的时候无法精确到目标点，若目标点是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了，一步一步往前肯定不会出现这样的问题。

赞 (0)

相关推荐

  • 原生javascript实现匀速运动动画效果

    原生javascript实现匀速运动动画效果

    本文向大家介绍一个javascript实现的动画.点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动.请看下面代码: <html> <head> <meta charset="gb2312"> <head> <title>javascript实现的简单动画</title> <style type="text/css"> #mydiv { width:50px;

  • javascript匀速运动实现方法分析

    javascript匀速运动实现方法分析

    本文实例讲述了javascript匀速运动实现方法.分享给大家供大家参考,具体如下: 匀速运动步骤: 1. 清除定时器 2. 开启定时器 3. 运动是否完成:a.运动完成,清除定时器:b.运动未完成继续 匀速运动停止条件:距离足够近  Math.abs(当然距离-目标距离) < 最小运动距离 运行效果截图如下: div的匀速运动(简单运动)示例: <!doctype html> <html> <head> <meta charset="utf-8&

  • JS匀速运动演示示例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • JavaScript中的匀速运动和变速(缓冲)运动详细介绍

    一个div的运动其实就是它与浏览器边框的距离在变动.如果他变化的速率一定,那就是匀速运动:如果变化的速率不一定,那么就是变速运动.当,变化率与聚离浏览器边框的距离成比例的话,那么就可以说是div在做缓冲运动. 其实,很简单,就是用一个定时器(timer),每隔一段时间来改变div聚浏览器边框的距离. 比如匀速运动: 进入定时器:(每隔30ms做) if(是否到达终点) { 停止定时器} else do{ 改变距离} 改变距离的方法决定是匀速还是变速(缓冲)运动. 匀速的比如: 复制代码 代码如下

  • 浅谈Javascript如何实现匀速运动

    浅谈Javascript如何实现匀速运动

    网站上会经常用到Javascript 中的运动,这次与大家分享一下一些运动的基本应用 . 方便大家在开发中能够直接使用. 代码简单易懂,适用于初学者.最后会一步一步整理出一套自己的运动框架. 应用案例效果图: 鼠标移动到分享上 ,左边的div就会显示出来.移开会自己恢复.相信这个大家都会用到 很实用,下面看看代码是如何实现的. 复制代码 代码如下: <style type="text/css">             #div1 {                 wid

  • JS实现匀速运动的代码实例

    JS实现匀速运动的代码实例

    效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #div1        {            width: 100px;            height: 10

  • js指定步长实现单方向匀速运动

    本文实例为大家分享了js实现单方向匀速运动的具体代码,供大家参考,具体内容如下 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id='box'></div> <sc

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

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

    我们先来看下之前的匀速运动的代码,修改了速度speed后会出现怎么样的一个bug.这里加了两个标杆用于测试 复制代码 代码如下: <style type="text/css">             #div1 {                 width: 100px;                 height: 100px;                 position: absolute;                 background: red;

  • 浅谈JavaScript中面向对象的的深拷贝和浅拷贝

    理解深拷贝和浅拷贝之前需要弄懂一些基础概念,内存中存储的变量类型分为值类型和引用类型. 1.值类型赋值的存储特点, 将变量内的数据全部拷贝一份, 存储给新的变量. 例如:var num = 123 :var num1=num; 表示变量中存储的数字是 123.然后将数据拷贝一份,就是将 123 拷贝一份. 那么内存中有 2 个 数组;将拷贝数据赋值给 num2,其特点是在内存中有两个数据副本.这可以理解为浅拷贝. 2.引用类型的赋值. var o={name:'张三'}: var obj=o;

  • 浅谈javascript中的constructor

    constructor,构造函数,对这个名字,我们都不陌生,constructor始终指向创建当前对象的构造函数. 这里有一点需要注意的是,每个函数都有一个prototype属性,这个prototype的constructor指向这个函数,这个时候我们修改这个函数的prototype时,就发生了意外.如 function Person(name,age){ this.name = name; this.age = age; } Person.prototype.getAge = function

  • 浅谈javascript中的Function和Arguments

    javascript的Function 属性: 1.Arguments对象 2.caller 对调用单前函数的Function的引用,如果是顶层代码调用,  则返回null(firefox返回undefined).  注:只有在代码执行时才有意义 3.length 声明函数是指定的命名参数的个数(函数定义是,定义参数的个数) 4.prototype 一个对象,用于构造函数,这个对象定义的属性和方法  由构造函数创建的所有对象共享. 方法: applay() --> applay(this,[])

  • 浅谈javascript中new操作符的原理

    浅谈javascript中new操作符的原理

    javascript中的new是一个语法糖,对于学过c++,java 和c#等面向对象语言的人来说,以为js里面是有类和对象的区别的,实现上js并没有类,一切皆对象,比java还来的彻底 new的过程实际上是创建一个新对象,把新象的原型设置为构造器函数的原型,在使用new的过程中,一共有3个对象参与了协作,构造器函数是第一个对象,原型对象是二个,新生成了一个空对象是第三个对象,最终返回的是一个空对象,但这个空对象不是真空的,而是已经含有原型的引用(__proto__) 步骤如下: (1) 创建一

  • 浅谈Javascript中的函数、this以及原型

    关于函数 在Javascript中函数实际上就是一个对象,具有引用类型的特征,所以你可以将函数直接传递给变量,这个变量将表示指向函数"对象"的指针,例如: function test(message){ alert(message); } var f = test; f('hello world'); 你也可以直接将函数申明赋值给变量: var f = function(message){ alert(message); }; f('hello world'); 在这种情况下,函数申明

  • 浅谈JavaScript中小数和大整数的精度丢失

    先来看两个问题: 0.1 + 0.2 == 0.3; // false 9999999999999999 == 10000000000000000; // true 第一个问题是小数的精度问题,在业界不少博客里已有讨论.第二个问题,去年公司有个系统的数据库在做数据订正时,发现有部分数据重复的诡异现象.本文将从规范出发,对上面的问题做个小结. 最大整数 JavaScript 中的数字是用 IEEE 754 双精度 64 位浮点数 来存储的,其格式为: s x m x 2^e s 是符号位,表示正负

  • 浅谈JavaScript中变量和函数声明的提升

    现象: 1. 在JavaScript中变量和函数的声明会提升到最顶部执行. 2. 函数的提升高于变量的提升. 3. 函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4. 匿名函数不会提升. 5. 不同<script>块中的函数互不影响. 例子: 函数声明提升高于变量声明 //同时声明变量a和函数a var a; function a() {} alert(typeof a); //显示的是"function",初步证明function的优先级高于var.

  • 浅谈javascript中的加减时间

    上午在处理一些js中的日期参数的时候遇到了一点问题,不晓得如何加减时间. 最初的想法是自己分别取出year,month,day,hour,minute,second,然后手动加...开始想直接来个借位符就好了,后来一想,哪有那么容易. 最后,经过一个上午的摸索,终于搞定了. 首先是怎么显示一个标准的日期时间格式   "yyyy-mm-dd hh:MM:ss",暂时做法是先 var dtNow=new Date().//当前时间 标准的日期时间就拼出来,dtNow.getFullYear

  • 浅谈JavaScript中数组的增删改查

    数组的增加 •ary.push()   向数组末尾添加元素,返回的是添加后新数组的长度,原有数组改变 •ary.unshift()  向数组开头添加元素,返回的是添加后新数组的长度,原有数组改变 • var ary=[1,2,3,4];   var res=ary.unshift(6);   console.log(res); ---->5 返回的是新数组的长度•ary.splice(n,m,x)从索引n开始删除m个元素,把新增的元素X放在索引n的前面,把删除的元素当成一个新数组返回,原有数组改

随机推荐