ES6 - Animation

Vous pouvez utiliser JavaScript pour créer une animation complexe ayant, mais sans s'y limiter, les éléments suivants -

  • Fireworks
  • Effet de fondu
  • Roll-in ou roll-out
  • Page-in ou Page-out
  • Mouvements d'objets

Dans ce chapitre, nous verrons comment utiliser JavaScript pour créer une animation.

JavaScript peut être utilisé pour déplacer un certain nombre d'éléments DOM (<img />, <div> ou tout autre élément HTML) autour de la page selon une sorte de modèle déterminé par une équation logique ou une fonction.

JavaScript fournit les fonctions suivantes à utiliser fréquemment dans les programmes d'animation.

  • setTimeout(fonction, durée) - Cette fonction appelle la fonction après une durée en millisecondes à partir de maintenant.

  • setInterval(fonction, durée) - Cette fonction appelle la fonction après chaque durée en millisecondes.

  • clearTimeout(setTimeout_variable) - Cette fonction efface toute minuterie définie par la fonction setTimeout ().

JavaScript peut également définir un certain nombre d'attributs d'un objet DOM, y compris sa position à l'écran. Vous pouvez définir l'attribut supérieur et gauche d'un objet pour le positionner n'importe où sur l'écran. Voici la syntaxe pour le même.

// Set distance from left edge of the screen.  
object.style.left = distance in pixels or points;    
or  
// Set distance from top edge of the screen.  
object.style.top = distance in pixels or points;

Animation manuelle

Implémentons donc une animation simple en utilisant les propriétés d'objet DOM et les fonctions JavaScript comme suit. La liste suivante contient différentes méthodes DOM.

  • Nous utilisons la fonction JavaScript getElementById() pour obtenir un objet DOM puis l'assigner à une variable globale imgObj.

  • Nous avons défini une fonction d'initialisation init() pour initialiser imgObj où nous avons défini sa position et ses attributs de gauche.

  • Nous appelons la fonction d'initialisation au moment du chargement de la fenêtre.

  • Nous appelons moveRight()fonction pour augmenter la distance gauche de 10 pixels. Vous pouvez également le définir sur une valeur négative pour le déplacer vers la gauche.

Exemple

Essayez l'exemple suivant

<html> 
   <head> 
      <title>JavaScript Animation</title> 
      <script type = "text/javascript"> 
         <!--  
            var imgObj = null; function init(){  
               imgObj = document.getElementById('myImage');
               imgObj.style.position = 'relative';     
               imgObj.style.left = '0px';   
            }     
            function moveRight(){  
               imgObj.style.left = parseInt(
               imgObj.style.left) + 10 + 'px';  
            }  
            window.onload = init;  
            //
         --> 
      </script> 
   </head> 
   
   <body> 
      <form> 
         <img id = "myImage" src = "/images/html.gif" /> 
         <p>Click button below to move the image to right</p> 
         <input type = "button" value = "Click Me" onclick = "moveRight();" /> 
      </form>
   </body>
   
</html>

Animation automatisée

Dans l'exemple ci-dessus, nous avons vu comment une image se déplace vers la droite à chaque clic. Nous pouvons automatiser ce processus en utilisant la fonction JavaScriptsetTimeout() comme suit.

Ici, nous avons ajouté plus de méthodes. Alors, voyons ce qu'il y a de nouveau ici.

  • le moveRight() function appelle la fonction setTimeout () pour définir la position de imgObj.

  • Nous avons ajouté une nouvelle fonction stop() pour effacer la minuterie définie par la fonction setTimeout () et pour mettre l'objet à sa position initiale.

Exemple

Essayez l'exemple de code suivant.

<html> 
   <head> 
      <title>JavaScript Animation</title> 
      <script type = "text/javascript"> 
         <!--  
            var imgObj = null; var animate ; function init(){  
               imgObj = document.getElementById('myImage');     
               imgObj.style.position = 'relative';    
               imgObj.style.left = '0px'; 
            }  
            function moveRight(){  
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';    
               animate = setTimeout(moveRight,20); 
               // call moveRight in 20msec  
            }  
            function stop() {     
               clearTimeout(animate);    
               imgObj.style.left = '0px';   
            }  
            window.onload = init;  
            //
         --> 
      </script> 
   </head> 

   <body> 
      <form> 
         <img id = "myImage" src = "/images/html.gif" /> 
         <p>Click the buttons below to handle animation</p> 
         <input type="button" value="Start" onclick = "moveRight();" /> 
         <input type = "button" value="Stop" onclick = "stop();" /> 
      </form>    
   </body> 
</html>

Survol avec un événement de souris

Voici un exemple simple montrant le survol d'image avec un événement de souris.

Voyons ce que nous utilisons dans l'exemple suivant -

  • Au moment du chargement de cette page, l'instruction 'if' vérifie l'existence de l'objet image. Si l'objet image n'est pas disponible, ce bloc ne sera pas exécuté.

  • le Image() constructeur crée et précharge un nouvel objet image appelé image1.

  • le src propriété reçoit le nom du fichier image externe appelé /images/html.gif.

  • De même, nous avons créé image2 objet et assigné /images/http.gif dans cet objet.

  • le #(marque de hachage) désactive le lien afin que le navigateur n'essaye pas d'accéder à une URL lorsqu'il clique dessus. Ce lien est une image.

  • le onMouseOver le gestionnaire d'événements est déclenché lorsque la souris de l'utilisateur se déplace sur le lien, et le onMouseOut Le gestionnaire d'événements est déclenché lorsque la souris de l'utilisateur s'éloigne du lien (image).

  • Lorsque la souris se déplace sur l'image, l'image HTTP passe de la première image à la seconde. Lorsque la souris est éloignée de l'image, l'image d'origine s'affiche.

  • Lorsque la souris est éloignée du lien, l'image initiale html.gif réapparaîtra à l'écran.

<html> 
   <head> 
      <title>Rollover with a Mouse Events</title> 
      <script type = "text/javascript"> 
         <!--  
            if(document.images) {  
               var image1 = new Image();       
               // Preload an image image1.src = "/images/html.gif";  
                  
               var image2 = new Image();       
               // Preload second image image2.src = "/images/http.gif";  
            }  
            //
         -->
      </script> 
   </head> 

   <body> 
      <p>Move your mouse over the image to see the result</p>
      <a href = "#" onMouseOver = "document.myImage.src = image2.src;"      
         onMouseOut = "document.myImage.src = image1.src;"> 
         <img name = "myImage" src = "/images/html.gif" /> 
      </a> 
   </body>
   
</html>