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

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())
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,239评论 25 709
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 12,724评论 6 30
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 10,544评论 5 13
  • 坚持倾听和交流完成婚礼在意你的感受,满足你需要满足的要求不坑你,预算范围内完成婚礼一对一专人全程服务保证婚礼 我们...
    星小姐De阅读 2,773评论 0 0
  • 眷恋周末惬意的时光,它没有闹钟惊扰甜蜜的梦乡,没有耳畔纷乱吵闹的嘈杂,没有校园奋斗不止的脚印。给心灵放个假...
    晴天_zh阅读 2,454评论 0 2

友情链接更多精彩内容