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>
posted @ 2021-09-29 13:58  wmui  阅读(221)  评论(0编辑  收藏  举报