JavaScript缓动动画函数封装

简单动画函数:

animate(obj, target, time, callback);

注意:
obj:目标对象,需要加绝对定位
target:目标位置
time:动画间隔时间
callback:回调函数

代码实现:

function animate(obj, target, time, 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);
            // 回调函数写到定时器结束里面
            callback && callback();
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, time);
}
posted @ 2020-10-12 14:45  火星飞鸟  阅读(316)  评论(0编辑  收藏  举报