首页 > 代码库 > 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 ，附上图
可以看到div2 作为一个标杆 物体并没有运动到底。
解决方案： 就要取整。
当div往右动, speed 为正 就ceil() ， 若div的初始位置为600,那就是在向左走 , 此时speed是负值
若算出来speed=-0.9 在ceil() 一下 那就是变成0了 ,就会出问题 所以要floor,向下取整
最后结合起来判断speed 的正负 来调用不同的取整方式。 这套程序就可以 既往右边 又往左边运动。
总结：
往右边移动 就向上取整 / 左边就向下取整
用缓冲运动一定要取整,否则就会出bug
最后的效果
Javascript 学习笔记 缓冲运动——逐行分析代码，让你轻松了解缓冲运动的原理