缓慢动画效果

原理

1.让盒子每次移动的距离慢慢变小，速度就会慢下来

2.核心算法：（目标值 - 现在的位置）/10 作为每次移动的步长

3.停止条件：让当前的盒子位置等于目标位置就停止

ody>
    <div></div>
    <script>
        //封装函数
        function animate(obj, target) { //添加两个参数  obj和target
            //添加定时器
            var timer = setInterval(function() {
                //步长写在定时器里面 步长公式：（目标值-现在的位置）/10
               //步长取整往大的走
                var step = Math.ceil((target - obj.offsetLeft) / 10);
                if (obj.offsetLeft == target) {
                    //添加停止定时器，让盒子停下来
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 100)
        }
        //调用
        var div = document.querySelector('div');
        animate(div, 400);
    </script>