JavaScript基础进阶——定时器设置动画效果

本文介绍了JavaScript中的定时器基础,包括如何使用setTimeout和clearTimeout来创建和停止定时器。重点讲解了如何通过定时器实现盒子的动画效果,涉及设置定位、设定步长、缓动动画、边界判断以及回调函数的应用。在动画过程中,当盒子移动到目标位置时,会自动清除定时器并可执行回调函数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

定时器是什么?

setTimeout(调用函数,[延迟时间(毫秒)]) 设置定时器 时间默认为0

怎样停止定时器?

清除定时器  clearInterval(TImerId) 

也可以让定时器暂停 clearTimeout

设置动画效果——让盒子动起来

核心算法:让盒子的当前位置加 一个固定或者变化的步长值 

步骤:

1、给盒子添加定位 让盒子可以设置left值

2、给盒子绑定定时器

3、设置步长值 变化的步长值为缓动动画 

4、ceil 向上取整 floor 四舍五入

5、当移动距离达到 target值时 停止移动 清除定时器

6、形参中设置了 callback 函数 当停止移动时需要判断是否有回调函数需要执行

// 封装动画函数 将回调函数作为封装函数的一个形参进行传递
function animate(obj,target,callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式:(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

注意:left值必须要加 ’px‘ 不然不起作用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值