与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔,而且比setTimeout 和setInterval都要精确,它采用系统时间间隔,保持最佳绘制效率,不会因为间隔时间过短,造成过度绘制,增加开销;也不会因为间隔时间太长,使用动画卡顿不流畅,让各种网页动画效果能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果。
大多数电脑显示器的刷新频率是60Hz,大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过那个频率用户体验也不会有提升。因此,最平滑动画的最佳循环间隔是1000ms/60,约等于16.6ms
setTimeout 和setInterval 都是把动画代码放入到线程执行队列中,到时间并不一定执行。
requestAnimationFrame 是HTML5的新特性。用法如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="div" style="width:100px; height:100px; background-color:red; position: absolute;left:0; top:0;">
</div>
<script>
var divEle = document.getElementById("div");
var distance = 1080;
var timeCount = 20000;
var animationId = 0;
function handler( time ) {
if(time > timeCount) {
window.cancelAnimationFrame(animationId);
}
divEle.style.left = time * distance / timeCount + "px";
animationId = window.requestAnimationFrame( handler );
}
animationId = window.requestAnimationFrame( handler );
</script>
</body>
</html>
从用法我们看出和setTimeout用法基本一致,只是不用设置定时时间。
我们改变timeCount就能调节动画运行的快慢。