requestAnimationFrame()用法

快乐打工仔 分类:实例代码

在此之前,我们要在页面实现动画有以下几种方式:

(1).使用css3的相关属性。

(2).使用canvas。

(3).使用setTimout()或者setInterval()。

使用setTimout()或者setInterval()这两个定时器函数实现动画是最为原始简单的方式,但是缺点也很大。

最重要的一个缺点就是有可能出现丢帧现象;现在大部分浏览器的刷新频率是16.7ms,当你当定时器函数的时间间隔小于这个值,比如是10ms就会发生丢帧;下面粗略描绘一下这个过程:

(1).当第一个绘制请求到来,并绘制完成,浏览器刷新一次,完全没有问题,页面上显示此次绘制的效果。

(2).10ms以后第二个绘制请求到来,并绘制完成,那么需要等待6.7ms才能显示此次绘制效果。

(3).第二次绘制完成之后3.3ms,第三次请求绘制到来,这时候距离第三次浏览器刷新还需要13.4ms,当第四次绘制请求到来,第三次刷新还没有到来;那么当三次刷新到来的时候,第三次绘制请求的效果就会被第四次的效果所覆盖,这也就是所谓的丢帧。

requestAnimationFrame()方法从名称看 ,就是专门设计用来完成动画的,并且它是跟随浏览器的刷新频率,如果浏览器的刷新频率是16.7ms,那么它就间隔16.7ms绘制,如果刷新频率是10ms,那么就间隔10ms绘制。

主要优点如下:

(1).requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧

(2).隐藏或不可见的元素或者非当前激活选项卡页面,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的的cpu,gpu和内存使用量。在老版本的浏览器中,setTimeout()或者setInterval()在非激活的选项卡页面中也会照常运行,据说在当前的谷歌和火狐浏览器中,这两个方法得到了优化,具有和

requestAnimationFrame()类似的行为,当页面处于闲置状态的时候,如果定时间隔小于1000ms,则停止了定时器的执行,不过时间间隔大于或等于1000ms,定时器依然执行,即使页面最小化或非激活状态。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
#antzone {
  width:1px;
  height:17px;
  background:#0f0;
}
</style>
<script>
window.onload=function(){
  window.requestAnimationFrame = window.requestAnimationFrame ||
                                 window.mozRequestAnimationFrame ||
                                 window.webkitRequestAnimationFrame ||
                                 window.msRequestAnimationFrame;
  var start = null;
  var ele = document.getElementById("antzone");
  var progress = 0;
 
  function step() {
    progress += 1;
    ele.style.width = progress + "%";
    ele.innerHTML = progress + "%";
    if (progress < 100) {
      requestAnimationFrame(step);
    }
  }
  requestAnimationFrame(step);
  document.getElementById("run").addEventListener("click", function () {
    ele.style.width = "1px";
    progress = 0;
    requestAnimationFrame(step);
  }, false);
}
</script>
</head>
<body>
  <div id="antzone">0%</div>
  <input type="button" value="查看演示" id="run" />
</body>
</html>

和setInterval()类似,返回值也是一个标识,使用cancelAnimationFrame()可以停止动画的执行。

requestAnimationFrame()用法,这样的场景在实际项目中还是用的比较多的,关于requestAnimationFrame()用法就介绍到这了。

requestAnimationFrame()用法属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容