此请求动画帧填充是否也会产生时间戳

Does this requestAnimationFrame polyfill produce a timestamp aswell?

本文关键字：时间戳 是否 请求 动画 填充      更新时间：2023-09-26
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
    window.cancelAnimationFrame =
      window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function() { callback(currTime + timeToCall); },
          timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };
if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
    };
}());

取自 https://gist.github.com/paulirish/1579671。在第一个 if 语句中，它测试requestAnimationFrame是否作为窗口属性存在。在此 if 语句中，它创建了补偿所需的超时，但它是否也创建了一个要传递到调用函数中的时间戳？element论点有什么作用？我想我需要有人帮助我了解这里发生的事情。

这是一个用例，用于显示我所指的时间戳：

var id = null,
start_time = null,
time_passed = null;
function loop( timestamp ){
   if( !start_time ) start_time = timestamp;
   time_passed = timestamp - start_time;
   if( time_passed < 1000 ){
        id = requestAnimationFrame( loop );
   }
}
id = requestAnimationFrame( loop );

第一个循环只是通过检查window-object中是否存在供应商前缀的变体来测试window.requestAnimationFrame和window.cancelAnimationFrame的存在。

element参数已弃用，如 http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

您还会注意到请求AnimFrame的第二个参数： 元素，在视觉上绑定整个动画。对于帆布和 WebGL，这将是实际的元素。对于 DOM 的东西，你 可以将其关闭或定义它以进行稍微优化 经验。 此后，它已从规范中删除(和WebKit的 实施(

它将当前时间戳传递给回调函数：

var id = window.setTimeout(function() { callback(currTime + timeToCall); },
      timeToCall);

其中currTime + timeToCall是调用函数的时刻。然后，您可以像在示例中一样，在动画函数中将其用作第一个参数：

function loop(time){
  //time === current time
}
相关文章：