首页 > 代码库 > Javascript 学习笔记 缓冲运动——逐行分析代码,让你轻松了解缓冲运动的原理

Javascript 学习笔记 缓冲运动——逐行分析代码,让你轻松了解缓冲运动的原理

看过上一篇关于Javascript 匀速运动文章的朋友相信对于运动已经有了初步的了解

接下来 讲一下关于缓冲运动的原理 ,我会逐行分析代码,代码简单易懂,能马上理解其中的原理,适用于初学者。

#div1 {                width: 100px;                height: 100px;                position: absolute;                background: red;                top: 50px;                left: 0; /*600 初始值*/            }            #div2 {                width: 1px;                height: 300px;                position: absolute;                left: 300px;                top: 0;                background: black;            }
<body>        <input type="button" id="btn" value="开始运动" onclick="startMove()" />        <div id="div1">        </div>        <div id="div2">        </div>    </body>

以下是Javascript 代码

<script type="text/javascript">                        function startMove() {                var oDiv = document.getElementById("div1");                setInterval(function() {                    var speed = (300 - oDiv.offsetLeft) / 10;                            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);                    oDiv.style.left = oDiv.offsetLeft + speed + ‘px‘;                }, 30)            }        </script>

这短短的几行代码,让我们看看其中有些什么原理,为何是这样写,实现缓冲运动。

原理:

当物体和终点之间的距离大的时候 速度是大的  距离不断的减小,速度也不断的减小

也就是说 速度与距离成正比 这样就是缓冲运动的原理。

代码分析:

var speed = (300 - oDiv.offsetLeft) / 10;  300 是自己定义的目标点 , 也就是div1 要运动到哪个地方

这里为什么要除以10呢 ?  因为 当物体的offsetLeft 为0 的时候 ,300-0=0   speed=300;

这样运动会直接到达目标点,而没有了中间的过程。 本质的问题其实就是速度太大太快了,一下就到了终点。

解决方案:除以10, 这样速度就变小了,就有了中间的过程。 那随着距离的越来越小 速度也就越来越小 达到缓冲的效果。

若分母越小 速度越大 ,控制速度 去改变分母即可。

speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

此时 除出来会有小数的情况 大家知道在css中 290.5px =290px , 299.9px = 299px 像素会舍去小数部分

所以他运动到最后不会达到目标点 这样就会出现了bug ,附上图

image 可以看到div2 作为一个标杆 物体并没有运动到底。

 

解决方案: 就要取整。

当div往右动, speed 为正 就ceil() , 若div的初始位置为600,那就是在向左走 , 此时speed是负值

若算出来speed=-0.9  在ceil() 一下 那就是变成0了 ,就会出问题  所以要floor,向下取整

最后结合起来判断speed 的正负 来调用不同的取整方式。 这套程序就可以 既往右边 又往左边运动。

 

 

总结:

往右边移动 就向上取整 / 左边就向下取整

用缓冲运动一定要取整,否则就会出bug

最后的效果

image

Javascript 学习笔记 缓冲运动——逐行分析代码,让你轻松了解缓冲运动的原理