JavaScriptrequestAnimationFrame


Syntaxe

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

Paramètres

Paramètre Détails
rappeler "Un paramètre spécifiant une fonction à appeler quand il est temps de mettre à jour votre animation pour la prochaine repeindre." ( https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)

Remarques

Quand il s'agit d'animer des éléments DOM avec fluidité, nous sommes limités aux transitions CSS suivantes:

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

Cependant, leur utilisation ne garantit pas la fluidité de vos animations, car le navigateur lance de nouveaux cycles de paint , indépendamment de ce qui se passe. Fondamentalement, la paint est faite de manière inefficace et votre animation est "janky" parce que les images par seconde (FPS) en souffrent.

Pour garantir des animations DOM aussi simples que possible, requestAnimationFrame doit être utilisé avec les transitions CSS ci-dessus.

La raison pour laquelle cela fonctionne est que l'API requestAnimationFrame permet au navigateur de savoir qu'une animation doit avoir lieu au cycle de paint suivant, au lieu d'interrompre ce qui se produit pour forcer un nouveau cycle de peinture lorsqu'une animation non-RAF est appelée .

Les références URL
Qu'est ce que c'est jank? http://jankfree.org/
Animations Haute Performance http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ .
RAIL https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail?hl=fr
Analyse du chemin de rendu critique https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=en
Performance de rendu https://developers.google.com/web/fundamentals/performance/rendering/?hl=fr
Analyse des temps de peinture https://developers.google.com/web/updates/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode?hl=en
Identifier les goulots d'étranglement https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas?hl=en

requestAnimationFrame Exemples Liés