封装缓动动画函数

在许多场景中，我们需要给元素添加缓动效果，比如轮播图等。

我们可以封装一个缓动动画函数，当我们需要给元素添加缓动效果时，直接调用夯实即可，可以提高开发效率。

函数封装如下：

function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            /* if (callback) {
                callback();
            }; */
            callback && callback(); //判断是否执行回调函数
        };
        var step = (target - obj.offsetLeft) / 10; //每次移动的距离
        step = step > 0 ? Math.ceil((target - obj.offsetLeft) / 10) : Math.floor((target - obj.offsetLeft) / 10);
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
};

参数解释如下：

obj：添加缓动效果的元素

target：目标位置

callback（可选）：动画完成后执行的函数

值得一提的是，由于函数中使用了绝对定位