js缓慢动画核心算法为什么步长为正向上取整，步长为负向下取整

2年前 (2022) 程序员胖胖胖虎阿

297 0 0

在学习js缓慢动画的时候，对于算法：步长为正数时，向上取整Math.ceil(step)；步长为负数时向下取整Math.floor(step)，对于这个取整的逻辑没有明白，自己动手操作了下

<body>
    <div></div>
    <span></span>
    <button>点击</button>
    <script>
        var div = document.querySelector('div');
        var button = document.querySelector('button');
        //var span = document.querySelector('span');
        button.addEventListener('click',function(){
            animate(div,200);
        });
        function animate(obj,target){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var step = ( target - obj.offsetLeft ) / 10;
                console.log('step--'+step);
                console.log("offsetLeft--"+obj.offsetLeft);
                if(obj.offsetLeft >= target){
                clearInterval(obj.timer);
                }
                console.log(obj.style.left);
                obj.style.left = obj.offsetLeft + step + "px";
            },30)             
        }
    </script>
</body>

执行之后的结果：
1. js缓慢动画核心算法为什么步长为正向上取整，步长为负向下取整
div的移动距离并没有达到预期的目标距离200px。
2.

定时器并没有被清除，但是div却停止了运动。
百度查询了下，总结为：
1.将left与offsetLeft打印出来会发现offsetLeft会四舍五入，导致当offsetLeft为196时，200-196=4，4*0.1=0.4，196+0.4=196.4四舍五入后又是196，会无限循环下去导致移动距离一直达不到目标距离。
js缓慢动画核心算法为什么步长为正向上取整，步长为负向下取整
2.四舍五入使得小于0.5就相当于0，如果步长是正数的话，向下取整会造成后面的步长减到小于1时，之后的值都为0，所以还是会产生定位位置的误差（移动距离小于目标位置大小)。如果向上取整会将后面的小于1的步长都变成1，再慢慢的填到target，直到移动距离等于目标位置。
所以我理解的是步长为正向上取整，步长为负向下取整都是避免步长为0，导致移动距离小于目标位置大小。
参考文章链接1
参考文章链接2