JS封装一个缓动动画

代码演示

// 元素:obj
// 目标位置:target
// 回调函数:callback
function animate(obj, target, callback) {
    // 每执行一次定时器,就先将之前的定时器清除掉
    clearInterval(obj.timer);

    obj.timer = setInterval(function () {
        // 缓动动画公式:用目标值减去当前值最后除以10
        var step = (target - obj.offsetLeft) / 10;

        // 如果step的值大于0就往大取整,反之往小取整
        step = step > 0 ? Math.ceil(step) : Math.floor(step);

        // 如果当前值等于目标位置就结束定时器
        if (obj.offsetLeft == target) {
            // 结束定时器
            clearInterval(obj.timer);

            // 如果有callback这个回调函数就执行,没有就不执行
            callback && callback();
        }

        // 累加每次的和,由快到慢
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}
无标签
评论区
头像