ES6 - Animación

Puede usar JavaScript para crear una animación compleja que tenga, entre otros, los siguientes elementos:

  • Fireworks
  • Efecto de desvanecimiento
  • Roll-in o Roll-out
  • Page-in o Page-out
  • Movimientos de objetos

En este capítulo, veremos cómo usar JavaScript para crear una animación.

JavaScript se puede usar para mover varios elementos DOM (<img />, <div> o cualquier otro elemento HTML) alrededor de la página de acuerdo con algún tipo de patrón determinado por una función o ecuación lógica.

JavaScript proporciona las siguientes funciones para su uso frecuente en programas de animación.

  • setTimeout(función, duración): esta función llama a la función después de milisegundos de duración a partir de ahora.

  • setInterval(función, duración): esta función llama a la función después de cada milisegundos de duración.

  • clearTimeout(setTimeout_variable): esta función borra cualquier temporizador establecido por la función setTimeout ().

JavaScript también puede establecer una serie de atributos de un objeto DOM, incluida su posición en la pantalla. Puede establecer el atributo superior e izquierdo de un objeto para colocarlo en cualquier lugar de la pantalla. A continuación se muestra la sintaxis de la misma.

// 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;

Animación manual

Así que implementemos una animación simple usando propiedades de objeto DOM y funciones de JavaScript de la siguiente manera. La siguiente lista contiene diferentes métodos DOM.

  • Estamos usando la función de JavaScript getElementById() para obtener un objeto DOM y luego asignarlo a una variable global imgObj.

  • Hemos definido una función de inicialización init() para inicializar imgObj donde hemos establecido su posición y los atributos de la izquierda.

  • Estamos llamando a la función de inicialización en el momento de la carga de la ventana.

  • Estamos llamando moveRight()función para aumentar la distancia izquierda en 10 píxeles. También puede establecerlo en un valor negativo para moverlo hacia el lado izquierdo.

Ejemplo

Prueba el siguiente ejemplo

<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>

Animación automatizada

En el ejemplo anterior, vimos cómo una imagen se mueve hacia la derecha con cada clic. Podemos automatizar este proceso usando la función de JavaScriptsetTimeout() como sigue.

Aquí hemos agregado más métodos. Entonces, veamos qué hay de nuevo aquí.

  • los moveRight() La función está llamando a la función setTimeout () para establecer la posición de imgObj.

  • Hemos agregado una nueva función stop() para borrar el temporizador establecido por la función setTimeout () y para establecer el objeto en su posición inicial.

Ejemplo

Pruebe el siguiente código de ejemplo.

<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>

Rollover con un evento de mouse

A continuación, se muestra un ejemplo sencillo que muestra la imagen cambiante con un evento de mouse.

Veamos qué estamos usando en el siguiente ejemplo:

  • En el momento de cargar esta página, la declaración 'if' comprueba la existencia del objeto de imagen. Si el objeto de imagen no está disponible, este bloque no se ejecutará.

  • los Image() constructor crea y precarga un nuevo objeto de imagen llamado image1.

  • los src A la propiedad se le asigna el nombre del archivo de imagen externo llamado /images/html.gif.

  • Del mismo modo, hemos creado image2 objeto y asignado /images/http.gif en este objeto.

  • los #(marca de almohadilla) desactiva el enlace para que el navegador no intente ir a una URL cuando se hace clic en él. Este enlace es una imagen.

  • los onMouseOver El controlador de eventos se activa cuando el mouse del usuario se mueve sobre el enlace, y el onMouseOut El controlador de eventos se activa cuando el mouse del usuario se aleja del enlace (imagen).

  • Cuando el mouse se mueve sobre la imagen, la imagen HTTP cambia de la primera imagen a la segunda. Cuando el mouse se aleja de la imagen, se muestra la imagen original.

  • Cuando el mouse se aleja del enlace, la imagen inicial html.gif reaparecerá en la pantalla.

<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>