Retourner à la page d'accueil de TJS

Méthode : window.requestAnimationFrame()

Déclenche une animation via un traitement lancé à intervalle régulier

Syntaxe
Number requestAnimationFrame(Function traitement)

Compatible tous navigateurs

Description
Déclenche une animation via un appel régulier à la fonction traitement(). Un identifiant est retourné pour interrompre l'animation avec cancelAnimationFrame().

L'usage de requestAnimationFrame() est proche de setInterval(), mais a plusieurs avantages :
- le navigateur optimise les traitements pour garantir un rafraichissement régulier, généralement à 60 images par seconde (ou FPS = Frames Par Seconde)
- le navigateur interrompt l'animation lorsque l'onglet n'est plus visible afin de réduire la consommation CPU
- l'animation est plus fluide


Exemple 1 : Animation d'un ballon avec rebond
Code source
<style type="text/css">
   div#fps {
       position: absolute;
       top:25px;
       right:25px;
       background-color:#ccc;
       box-shadow: 1px 1px 1px #333;
       width:80px;
       padding:5px;
   }
   div#conteneur {
       width:100%;
       height:300px;
       border:1px solid #000;
       background: #eee;
       padding:0px;
       margin:0px;
   }
   div#ballon {
       width:100px;
       height:100px;
       background: #a00;
       border-radius:50%;
       left:0;
       top:0;
       position: relative;
   }
   div#coords {
       position: absolute;
       top:25px;
       left:25px;
       width:80px;
       padding:5px;
       font-size: 12px;
   }
   div.center {
       margin-top:20px;
       margin-left: auto;
       margin-right: auto;
       width:200px;
   }
</style>
<div id="conteneur">
 <div id="ballon"></div>
</div>
<div id="fps">FPS</div>
<div id="coords"></div>
<div class="center btn btn-sm radius cursor-pointer color-white radius background-color-green" onclick="toggleAnimation()" id="toggle">Arrêter l'animation</div>

<script type="text/javascript">
   /* Variables globales de traitement */
   var IDanimation, NBanimation = 0, nbFPS = 10;
   var x = 0, y = 0;
   var deltaX = 2, deltaY = 5, diametre = 100, bordure = 1;
   var conteneur = document.getElementById("conteneur").getBoundingClientRect();
   var largeur = conteneur.width - 2*bordure , hauteur = conteneur.height - 2*bordure;
   console.log("largeur="+largeur+"px hauteur="+hauteur+"px");
   
   function animer() {
       NBanimation++;        
       /* déplacement des coordonnées du ballon */
       x+=deltaX;
       y+=deltaY;

       document.getElementById("coords").innerHTML="("+x+", "+y+")";
       document.getElementById("ballon").style.left = x+"px";
       document.getElementById("ballon").style.top  = y+"px";

       /* Si le ballon dépasse le conteneur, on inverse le sens pour générer le rebond */
       if ((x+diametre>largeur) || (x<0)) {
           deltaX=-1*deltaX;
       }
       if ((y+diametre>hauteur) || (y<0)) {
           deltaY=-1*deltaY;
       }                

       // Toutes les nbFPS animations, maj du contenu div#fps
       if (NBanimation % nbFPS == 0) {
           var microtime2=window.performance.now();
           // Temps écoulé depuis le dernier appel
           var delai=microtime2-microtime1;
           // Conversion en FPS (frame par seconde)
           var fps = Math.round(1/delai*1000*nbFPS);
           document.getElementById("fps").innerHTML=fps + " FPS";
           microtime1=microtime2;
       }        
       IDanimation = requestAnimationFrame(animer);
   }

   function toggleAnimation() {
       console.log(IDanimation)
       if (IDanimation==0) { // Animation stoppée : on la relance
           animer();
           document.getElementById("toggle").innerHTML="Arrêter l'animation";
       } else {  // Arrêt de l'animation
           cancelAnimationFrame(IDanimation);
           IDanimation=0;
           document.getElementById("toggle").innerHTML="Relancer l'animation";
       }
   }

   var microtime1=window.performance.now();
   animer();
</script>

Résultat
FPS
Arrêter l'animation
Emulation de la console
Explication
Le ballon rebondit dans le conteneur. Le div#fps contient le nombre d'images par seconde que le navigateur parvient à maintenir.
Page mise à jour le

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 14 novembre 2019

Version papier à 29€90
Format électronique à 22€99.

Commandez en ligne

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...
Le 06/06/2020 12:06:46 sur php7 en 23.12 ms