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())