javascript - requestAnimationFrame 的最新 polyfill

Question

http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision告诉我，最近（Chrome 20）requestAnimationFrame 获得了一个新的亚毫秒精度计时器，并且我有更新我的代码以支持它。

环顾四周的各种 polyfill，它们似乎都早于这次更新。它们是否以某种方式起作用（我不这么认为），还是根本没有可用的最新版本？我应该自己做计时吗（似乎有点浪费）。

score 3 · Accepted Answer

我也刚读过那篇文章，很想自己尝试一下。我尝试在不支持高分辨率计时器的浏览器中为 rAF 回调添加包装器。它使用了 Paul Irish 的原始 polyfill，并添加了以下几行：

var hasPerformance = !!(window.performance && window.performance.now);

// Add new wrapper for browsers that don't have performance
if (!hasPerformance) {
    // Store reference to existing rAF and initial startTime
    var rAF = window.requestAnimationFrame,
        startTime = +new Date;

    // Override window rAF to include wrapped callback
    window.requestAnimationFrame = function (callback, element) {
        // Wrap the given callback to pass in performance timestamp
        var wrapped = function (timestamp) {
            // Get performance-style timestamp
            var performanceTimestamp = (timestamp < 1e12) 
                ? timestamp 
                : timestamp - startTime;

            return callback(performanceTimestamp);
        };

        // Call original rAF with wrapped callback
        rAF(wrapped, element);
    }        
}

这是所有内容的要点以及使用新代码的更新示例：

https://gist.github.com/4078614

http://jsfiddle.net/timhall/XQpzU/4351/

这种方法旨在将传递给回调函数的参数标准化为高分辨率计时器格式。如果您的现有代码期望这样做，您可以使用类似的方法（正好相反）将高分辨率计时器转换为旧格式，但我认为这是一种回归。

我将在我现在正在进行的一个项目中进行尝试，如果我发现任何问题/改进，我会更新要点。

score 2 · Accepted Answer

高分辨率计时的更改仅影响回调的参数。我不相信任何 polyfill 明确引用该参数，它仅取决于您如何使用它。所以 polyfills 不需要更新，应该已经可以正常工作了——只要注意如何使用 RAF 回调的参数，如果你不这样做，那就没什么好担心的了！

score 1 · Accepted Answer

这可能有效。修改了这个要点

https://gist.github.com/1579671

(function() {
    var lastTime = 0;
    var startTime = Date().getTime();
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    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 - startTime); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

获取闭包首次执行（页面加载）时的时间戳，然后将当前时间戳与原始时间戳之间的差异传递给回调。应该给你一个与新方法等效的整数。没有那么精确，但比完全不同的值要好。

score 1 · Accepted Answer

这是 Paul Irish 的博客条目，其中包含原始 polyfil 和他的更新。

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

对于大多数情况，这应该足够了。

score -2 · Accepted Answer

Paul Irish 建议为此使用 polyfill。

window.requestAminFrame = (function(){
    return window.requestAminFrame || window.webkitRequestAnimFrame || window.mozRequestAnimFrame || window.msRequestAnimFrame || window.oRequestAnimFrame || function(func){return setTimeout(func,1/60);};
})();

javascript - requestAnimationFrame 的最新 polyfill

5 回答 5

Related

Reference