JS之BOM篇-requestAnimationFrame
HTML5新增了一个定时器requestAnimationFrame,旨在让动画操作更顺畅,更简单,更高效。requestAnimationFrame采用系统时间间隔,保持最佳绘制效率,不会因为间隔时间过短,造成过度绘制,增加开销;也不会因为间隔时间太长,使用动画卡顿不流畅,让各种网页动画效果能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果
使用
requestAnimationFrame的使用方法和setTimeout类似,只是不需要设置时间间隔。requestAnimationFrame使用一个回调函数作为参数,该函数会在浏览器重绘之前调用。它会返回一个整数表示定时器编号,可以传递给cancelAnimationFrame用于取消这个函数的执行
var timer = requestAnimationFrame(function(){
console.log(timer)
})
console.log(0)
// 0
// 1
cancelAnimationFrame取消定时器
var timer = requestAnimationFrame(function(){
console.log(timer)
})
cancelAnimationFrame(timer)
var timer = requestAnimationFrame(function(){
console.log(timer)
})
cancelAnimationFrame(1)
兼容
IE9-浏览器不支持requestAnimationFrame方法,可以使用setTimeout代替
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(fn) {
setTimeout(fn, 17);
};
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
应用
一个简单的进度条效果
<div id="box" style="width: 0;height: 20px;line-height: 20px;background: teal">0%</div>
<button id="btn">开始</button>
<script>
var timer;
btn.onclick = function() {
box.style.width = 0;
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn() {
if(parseInt(box.style.width) < 500) {
box.style.width = parseInt(box.style.width) + 5 + 'px';
box.innerHTML = parseInt(box.style.width) / 5 + '%';
timer = requestAnimationFrame(fn)
}else{
cancelAnimationFrame(timer);
}
})
}
</script>
胖胖熊笔记,笔记已迁移