Polymill aggiornato per requestAnimationFrame

Question

http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision mi dice che recentemente (Chrome 20) requestAnimationFrame ha ottenuto un nuovo timer di precisione inferiore al millisecondo e che devo aggiornare il mio codice per supportarlo.

Guardandosi intorno ai vari polyfill in giro, sembrano tutti pre-datare questo aggiornamento. Sono in qualche modo funzionali (io non la penso così), o semplicemente non è disponibile uno aggiornato? Dovrei solo fare i tempi da solo (sembra un po 'dispendioso).

Answer 1

La modifica per la sincronizzazione ad alta risoluzione ha effetto solo sul parametro del callback. Non credo che nessun polyfill faccia riferimento esplicitamente al parametro, dipende solo da come lo si usa. Quindi i polyfill non hanno bisogno di aggiornamenti e dovrebbero funzionare già bene - fai attenzione a come usi il parametro per il callback RAF, e se non lo fai, non c'è niente di cui preoccuparsi!

Answer 2

Paul Irish ha suggerito un polyfill per questo.

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

Answer 3

questo potrebbe funzionare. modificato questa sostanza

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

ottenere il timestamp quando i primi esegue chiusura (caricamento della pagina), poi passare nel richiamata la differenza tra il timestamp corrente e l'originale. Dovrebbe darti un numero intero equivalente del nuovo metodo. Non così preciso, ma migliore di un valore completamente diverso.

Answer 4

Avevo appena letto anche quell'articolo ed ero curioso di provarlo da solo. Ho preso una pugnalata all'aggiunta di un wrapper al callback di RAF nei browser che non supportano i timer ad alta risoluzione. Esso utilizza polyfill originale di Paul irlandese con le seguenti linee aggiunte:

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

Ecco un senso di essa tutto combinato insieme e un esempio aggiornato con il nuovo codice:

https://gist.github.com/4078614

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

Questo approccio mira a normalizzare il parametro passato nella funzione di callback al formato del timer ad alta risoluzione. Potresti usare un approccio simile, proprio di fronte, per convertire il timer ad alta risoluzione nel vecchio formato se il codice esistente lo prevede, ma lo vedo come una regressione.

Ho intenzione di provarlo in uno dei miei progetti su cui sto lavorando in questo momento e aggiornerò l'essenza se trovo problemi/miglioramenti.

Answer 5

Ecco il post di blog di Paul Irish contenente il polyfil originale e i suoi aggiornamenti.

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

Questo dovrebbe essere sufficiente per la maggior parte degli scenari.