利用requestAnimationFrame 优化动画效果
2017-09-26 本文已影响7人
Tiny_z
介绍
requestAnimationFrame 是浏览器用于定时循环操作的一个接口，和setTimeout类似，主要作用是按帧对网页进行重绘。
使用这个接口是为了让网页的动画效果，能够有一个统一的刷新机制。
优势：可以充分利用显示器的刷新机制，节省系统资源。我们的显示器一般都有固定的刷新频率（60Hz或75Hz）,也就是说，显示器每秒只能重绘60次或者75次，requestAnimationFrame就是让我们的页面重绘的频率，尽量和这个刷新频率保持同步。再一个就是，一旦页面不处于浏览器的当前标签，就会自动停止刷新，这样可以节省资源
不过这个接口是在主线程上完成的，这就意味着，如果主线程非常繁忙，就会影响到requestAnimationFrame的动画效果
使用
requestID = window.requestAnimationFrame(callback);
兼容性
为了更好的兼容不同的浏览器，可以使用下面的代码来模拟
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback,1000/60)
}
})();
取消动画
window.cancelAnimationFrame(requestID);
例子
下面用requestAnimationFrame来优化滚动进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.progress{
position:fixed;
top:0;
left:0;
height:3px;
background-color:#ffaaaa;
}
body{
height:2000px;
}
</style>
</head>
<body>
<div class="progress"></div>
<script>
(function(){
var wh = window.innerHeight;//窗口高度
var h = document.body.getBoundingClientRect().height; //页面高度
var dh = h - wh; // 可滚动高度
window.addEventListener('scroll',function(){
window.requestAnimationFrame(function(){
var percent = Math.max(0, Math.min(1,window.pageYOffset / dh)); // 计算滚动距离占可滚动高度百分比
document.querySelector('.progress').style.width = percent * 100 + '%';
})
},false);
})()
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback,1000/60)
}
})();
</script>
</body>
</html>
