8

http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precisionは、最近 (Chrome 20) requestAnimationFrame が新しいミリ秒未満の精度のタイマーを取得したことを教えてくれます。それをサポートするためにコードを更新します。

さまざまなポリフィルを見回すと、それらはすべてこの更新よりも前のもののようです。それらは何らかの形で機能していますか (私はそうは思いません)、それとも単に最新のものが利用できないのでしょうか? タイミングは自分でやろうかな(ちょっともったいない)。

4

5 に答える 5

3

私もその記事を読んだばかりで、自分で試してみたいと思っていました。私は、高解像度タイマーをサポートしていないブラウザーで rAF コールバックにラッパーを追加することに挑戦しました。次の行を追加して、Paul Irish のオリジナルのポリフィルを使用します。

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/

このアプローチは、コールバック関数に渡されるパラメーターを高解像度タイマー形式に正規化することを目的としています。既存のコードがそれを期待している場合、高解像度タイマーを古い形式に変換するために、正反対の同様のアプローチを使用できますが、それは回帰と見なされます。

現在取り組んでいるプロジェクトの 1 つで試してみて、問題や改善が見つかった場合は要点を更新します。

于 2012-11-15T13:23:59.133 に答える
2

ハイレゾ タイミングの変更は、コールバックへのパラメータにのみ影響します。パラメータを明示的に参照するポリフィルはないと思います。それは、使用方法に依存するだけです。そのため、ポリフィルを更新する必要はなく、すでに正常に動作しているはずです。RAF コールバックへのパラメーターの使用方法に注意してください。使用しない場合でも、心配する必要はありません。

于 2012-11-11T20:24:02.080 に答える
1

これは、元のポリフィルと彼の更新を含む Paul Irish のブログ エントリです。

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

ほとんどのシナリオではこれで十分です。

于 2016-05-31T15:16:13.903 に答える
1

これはうまくいくかもしれません。この要点を変更しました

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

クロージャが最初に実行されたとき (ページの読み込み) にタイムスタンプを取得し、現在のタイムスタンプと元のタイムスタンプの差をコールバックに渡します。新しいメソッドに相当する整数を提供する必要があります。正確ではありませんが、まったく異なる値よりは優れています。

于 2012-11-15T13:10:03.787 に答える
-2

Paul Irish は、こ​​れに対するポリフィルを提案しています。

window.requestAminFrame = (function(){
    return window.requestAminFrame || window.webkitRequestAnimFrame || window.mozRequestAnimFrame || window.msRequestAnimFrame || window.oRequestAnimFrame || function(func){return setTimeout(func,1/60);};
})();
于 2012-11-14T12:20:49.663 に答える