JS 缓动动画函数封装

363 阅读1分钟

obj:使用动画的对象
target:目标距离
callback:回调函数

function animate(obj,target,callback){

    clearInterval(obj.timer)  //每次调用前先清除定时器 防止在未调用间隔定义多个定时器

    //但是当它为正的时候 不能带有小数 应该向上取整 10 9 8 7 6
    //但是为 负数的时候应该向下取整 -10 -8 -7 -> 0


    obj.timer = setInterval(function () {

        let step = (target-obj.offsetLeft)/10
        step = step > 0?Math.ceil(step):Math.floor(step);

        if(obj.offsetLeft == target){  //函数完成 清除定时器 回调函数
            clearInterval(obj.timer);
            callback&&callback();  //回调函数存在即调用
        }
        obj.style.left = obj.offsetLeft+step+'px'

    },20)
}