Looking for javascript Keywords? Try Ask4Keywords

JavaScriptrequestAnimationFrame


Syntax

  • window.requestAnimationFrame ( Rückruf );
  • window.webkitRequestAnimationFrame ( Rückruf );
  • window.mozRequestAnimationFrame ( Rückruf );

Parameter

Parameter Einzelheiten
Ruf zurück "Ein Parameter, der eine Funktion angibt, die aufgerufen werden soll, wenn die Animation für die nächste Aktualisierung aktualisiert werden soll." ( https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)

Bemerkungen

Wenn es darum geht, DOM-Elemente flüssig zu animieren, beschränken wir uns auf die folgenden CSS-Übergänge:

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

Die Verwendung dieser Optionen ist jedoch keine Garantie dafür, dass Ihre Animationen flüssig sind, da der Browser neue paint startet, unabhängig davon, was sonst noch passiert. Grundsätzlich wird paint ineffizient gemacht, und Ihre Animation wirkt "janky", da die Frames pro Sekunde (FPS) darunter leiden.

Um eine möglichst glatte DOM-Animation zu gewährleisten, muss requestAnimationFrame in Verbindung mit den obigen CSS-Übergängen verwendet werden.

Der Grund , dies funktioniert, ist , weil die requestAnimationFrame API des Browser läßt wissen , dass Sie eine Animation auf dem nächsten passieren sollen paint Zyklus, im Gegensatz zu unterbrechen , was los ist einen neuen Anstrich Zyklus zu erzwingen , wenn eine Nicht-RAF - Animation genannt wird.

Verweise URL
Was ist Jank? http://jankfree.org/
Hochleistungs-Animationen http://www.html5rocks.com/de/tutorials/speed/high-performance-animations/ .
SCHIENE https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail?hl=de
Analysieren des kritischen Wiedergabepfads https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=de
Rendering-Leistung https://developers.google.com/web/fundamentals/performance/rendering/?hl=de
Lackzeiten analysieren https://developers.google.com/web/updates/2013/02/Profiling-Long-Paint-Times-with-DevToolss-Continuous-Painting-Mode?hl=de
Farbengpässe erkennen https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas?hl=de

requestAnimationFrame Verwandte Beispiele