Recherche…
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 |
Utilisez requestAnimationFrame pour fondre l'élément
- Voir jsFiddle : https://jsfiddle.net/HimmatChahal/jb5trg67/
- Code Copie + Pasteable ci - dessous :
<html>
<body>
<h1>This will fade in at 60 frames per second (or as close to possible as your hardware allows)</h1>
<script>
// Fade in over 2000 ms = 2 seconds.
var FADE_DURATION = 2.0 * 1000;
// -1 is simply a flag to indicate if we are rendering the very 1st frame
var startTime=-1.0;
// Function to render current frame (whatever frame that may be)
function render(currTime) {
var head1 = document.getElementsByTagName('h1')[0];
// How opaque should head1 be? Its fade started at currTime=0.
// Over FADE_DURATION ms, opacity goes from 0 to 1
var opacity = (currTime/FADE_DURATION);
head1.style.opacity = opacity;
}
// Function to
function eachFrame() {
// Time that animation has been running (in ms)
// Uncomment the console.log function to view how quickly
// the timeRunning updates its value (may affect performance)
var timeRunning = (new Date()).getTime() - startTime;
//console.log('var timeRunning = '+timeRunning+'ms');
if (startTime < 0) {
// This branch: executes for the first frame only.
// it sets the startTime, then renders at currTime = 0.0
startTime = (new Date()).getTime();
render(0.0);
} else if (timeRunning < FADE_DURATION) {
// This branch: renders every frame, other than the 1st frame,
// with the new timeRunning value.
render(timeRunning);
} else {
return;
}
// Now we're done rendering one frame.
// So we make a request to the browser to execute the next
// animation frame, and the browser optimizes the rest.
// This happens very rapidly, as you can see in the console.log();
window.requestAnimationFrame(eachFrame);
};
// start the animation
window.requestAnimationFrame(eachFrame);
</script>
</body>
</html>
Annulation d'une animation
Pour annuler un appel à requestAnimationFrame , vous avez besoin de l'identifiant renvoyé lors de son dernier appel. C'est le paramètre que vous utilisez pour cancelAnimationFrame . L'exemple suivant démarre une animation hypothétique, puis la met en pause après une seconde.
// stores the id returned from each call to requestAnimationFrame
var requestId;
// draw something
function draw(timestamp) {
// do some animation
// request next frame
start();
}
// pauses the animation
function pause() {
// pass in the id returned from the last call to requestAnimationFrame
cancelAnimationFrame(requestId);
}
// begin the animation
function start() {
// store the id returned from requestAnimationFrame
requestId = requestAnimationFrame(draw);
}
// begin now
start();
// after a second, pause the animation
setTimeout(pause,1000);
Garder la compatibilité
Bien sûr, comme la plupart des choses dans le navigateur JavaScript, vous ne pouvez pas compter sur le fait que tout sera le même partout. Dans ce cas, requestAnimationFrame peut avoir un préfixe sur certaines plates-formes et est nommé différemment, tel que webkitRequestAnimationFrame . Heureusement, il existe un moyen très simple de regrouper toutes les différences connues pouvant exister jusqu’à une fonction:
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
Notez que la dernière option (qui se remplit quand aucun support existant n'a été trouvé) ne retournera pas un identifiant à utiliser dans cancelAnimationFrame . Il existe cependant un polyfill efficace qui corrige cela.