requestAnimationFrame计算每帧之间的时隔间隔

2016-11-07  本文已影响0人  奥尼酱

requestAnimationFrame的回调函数会接收到一个参数,这个参数就是浏览器开始调用requestAnimationFrame添加进来的回调函数时(每次重新渲染页面内容之前),performance.now()的返回值,可见,这是一个从页面开始加载时,包括白屏的时候哦,直到当前时间的时间间隔。只要记录下上一次的时间,并用当前时间减去上一次的时间,就是每一帧的时间差。这个时间差就是逝去的时间,要变化的动画属性什么的,我们肯定设定了变化速度。计算出当前动画属性,例如高度,应该处于什么状态,可以通过 路程 = 速度 * 时间计算出来,这样就可以实现流畅的动画效果,并且标签页处于后台运行时,渲染次数大大减少,时间差也变长了,仍然可以确保随着时间的流逝,动画属性的值仍然是正确的,即使页面性能太差,帧率下降,虽然用户看起来卡了,但属性的值仍然是正确的。这也是为什么低配置的电脑虽然玩游戏画面卡顿很厉害,但人物还是跑了很远的距离,而没有一动不动,因为他们走的路程=速度时间*啊!

计算时间差的示例代码

function getReqCallback() {
  var count = 0;
  var start = null;
  var lastTimestamp = null;
  var delta = 0;
  return function req(timestamp) {
    if (start === null ) { 
      start = timestamp;
      lastTimestamp = timestamp;
    }
    count++;
    delta = timestamp - lastTimestamp;
    console.log(delta + 'ms');
    lastTimestamp = timestamp;
    if (count < 100) {
      requestAnimationFrame(req);
    }
  }
}
requestAnimationFrame(getReqCallback())
上一篇 下一篇

猜你喜欢

热点阅读