JavaScriptrequestAnimationFrame

Sintassi

  • window.requestAnimationFrame ( callback );
  • window.webkitRequestAnimationFrame ( callback );
  • window.mozRequestAnimationFrame ( callback );

Parametri

Parametro Dettagli
richiama "Un parametro che specifica una funzione da chiamare quando è il momento di aggiornare l'animazione per il prossimo ridisegno." ( https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)

Osservazioni

Quando si tratta di animare fluidamente gli elementi DOM, siamo limitati alle seguenti transizioni CSS:

  • POSITION - transform: translate (npx, npx);
  • SCALE - transform: scale(n) ;
  • ROTATION - transform: rotate(ndeg);
  • OPACITÀ - opacity: 0;

Tuttavia, l'utilizzo di questi non garantisce che le tue animazioni siano fluide, perché fa sì che il browser avvii nuovi cicli di paint , indipendentemente da ciò che sta succedendo. In sostanza, paint sono fatti in modo inefficiente e l'animazione sembra "janky", perché i fotogrammi al secondo (FPS) soffre.

Per garantire animazioni DOM senza intoppi, requestAnimationFrame deve essere utilizzato in combinazione con le transizioni CSS precedenti.

Il motivo per cui questo funziona, è perché il requestAnimationFrame API consente il browser sa che si desidera un'animazione per accadere alla prossima paint ciclo, al contrario di interrompere quello che sta succedendo per imporre un nuovo ciclo di verniciatura quando un'animazione non RAF si chiama.

Riferimenti URL
Cosa è jank? http://jankfree.org/
Animazioni ad alte prestazioni http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ .
ROTAIA https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail?hl=en
Analizzando il percorso di rendering critico https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=en
Prestazioni del rendering https://developers.google.com/web/fundamentals/performance/rendering/?hl=en
Analizzando i tempi di pittura https://developers.google.com/web/updates/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode?hl=en
Identificazione dei colli di bottiglia della vernice https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas?hl=en

requestAnimationFrame Esempi correlati