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

最后的效果