js缓慢动画的函数封装

缓动动画的原理就是让盒子移动的速度开始快到结束慢的步骤,有一种视觉舒服的作用.
完整版的函数封装如下:

    // 思路:
    // 1. 让盒子每次移动的距离慢慢变小, 速度就会慢慢落下来
    // 2. 核心算法: (目标值 - 现在的位置) /10 作为每次移动的距离  步长
    // 3. 停止的条件, 让当前盒子位置等于目标位置就停止计时器
    function animate(obj,target,callback){
        
        // 先清除以前的定时器, 只保留当前的一个定时器执行
        clearInterval(obj.timer)
        obj.timer = setInterval(function(){
            // 步长值写到定时器里面
            // 把我们的步长值改为整数 不要出现小数的问题
            var step = (target - obj.offsetLeft) / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step)
            if(obj.offsetLeft == target){
                // 停止动画 本质是停止定时器
                clearInterval(obj.timer)
            }
            // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式: (目标值 - 现在的位置) / 10 
            obj.style.left = obj.offsetLeft + step + 'px';
        },16.7)
    }