day208-requestAnimationFrame-了解

要点

  1. 作用
  2. 应用
  3. 实例

作用

要求浏览器在下次重绘之前调用指定的回调函数更新动画[1]

应用

  1. 减少重绘回流
  2. 替代通过时间管理队列的高频发事件,通过requestAnimationFrame来管理队列,保证 requestAnimationFrame的队列里,同样的回调函数只有一个。因为通常显示器16.7ms(16.7 = 1000 / 60, 即每秒60帧)的刷新间隔中,如果发生了其他绘制请求(setTimeout),可能导致帧丢失。这里帧丢失通常就包含有,滚动、触摸这类高触发频率事件的回调可能会在同一帧内触发多次所导致,requestAnimationFrame就是跟着浏览器的绘制走,绘制间隔时间内绘制完毕。

实例-进度条

<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div>
<button id="btn">run</button>
<script>
var timer; btn.onclick = function(){ myDiv.style.width = '0';
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
if(parseInt(myDiv.style.width) < 500){
myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
myDiv.innerHTML = parseInt(myDiv.style.width)/5 + '%';
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
</script>

进度条例子来自:W3Plus-被誉为神器的requestAnimationFrame

参考

[1]. window.requestAnimationFrame-MDN

CSS3动画那么强,requestAnimationFrame还有毛线用?

requestAnimationFrame 方法你真的用对了吗?

文章作者: lmislm
文章链接: http://lmislm.com/2019/08/09/2019-08-09/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog