定时器是什么?
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‘ 不然不起作用