JavaScript--缓冲动画

<style>
    div {
       width: 100px;
       height: 100px;
       background: pink;
      position: absolute;
     }
</style>

 <button>action</button>
 <div></div>
 <script>
        //匀速运动 公式
        //  新的位置 = 当前位置+步长
        //缓冲动画
        //从快到慢 (减速运动)
        //步长越变越少
        // 步长 = (目标位置-当前位置)/10
        var btn = document.querySelector('button') //接收按钮
        var box = document.querySelector('div') //获取div
            //给按钮添加点击事件
        btn.onclick = function() {
            //在点击事件中写定时器
            let timer = setInterval(() => {
                //在定时器方法里面控制div的移动
                //获取当前div的偏移量
                var currentX = box.offsetLeft
                    //获取步长
                var step = (300 - currentX) / 10
                    //如果当前步长是小于0就是向下取整  如果大于0就向上取整
                step = step > 0 ? Math.ceil(step) : Math.floor(step)
                    //控制div的移动
                box.style.left = currentX + step + 'px'
                    //到达目标位置后清除定时器
                if (Math.abs(300 - currentX) <= Math.abs(step)) {
                    clearInterval(timer)
                }
            }, 40)
        }
</script>