JavaScript - Animazione

È possibile utilizzare JavaScript per creare un'animazione complessa con, ma non limitato a, i seguenti elementi:

  • Fireworks
  • Effetto dissolvenza
  • Roll-in o roll-out
  • Page-in o Page-out
  • Movimenti di oggetti

Potresti essere interessato alla libreria di animazione basata su JavaScript esistente: Script.Aculo.us .

Questo tutorial fornisce una comprensione di base di come utilizzare JavaScript per creare un'animazione.

JavaScript può essere utilizzato per spostare un numero di elementi DOM (<img />, <div> o qualsiasi altro elemento HTML) all'interno della pagina secondo una sorta di modello determinato da un'equazione o una funzione logica.

JavaScript fornisce le seguenti due funzioni da utilizzare frequentemente nei programmi di animazione.

  • setTimeout( function, duration) - Questa funzione chiama function dopo duration millisecondi da adesso.

  • setInterval(function, duration) - Questa funzione chiama function dopo ogni duration millisecondi.

  • clearTimeout(setTimeout_variable) - Questa chiamata di funzione cancella qualsiasi timer impostato dalle funzioni setTimeout ().

JavaScript può anche impostare una serie di attributi di un oggetto DOM inclusa la sua posizione sullo schermo. È possibile impostare l' attributo superiore e sinistro di un oggetto per posizionarlo in qualsiasi punto dello schermo. Ecco la sua sintassi.

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

Animazione manuale

Quindi implementiamo una semplice animazione utilizzando le proprietà degli oggetti DOM e le funzioni JavaScript come segue. Il seguente elenco contiene diversi metodi DOM.

  • Stiamo usando la funzione JavaScript getElementById() per ottenere un oggetto DOM e quindi assegnarlo a una variabile globale imgObj.

  • Abbiamo definito una funzione di inizializzazione init() per inizializzare imgObj dove l'abbiamo impostato position e left attributi.

  • Stiamo chiamando la funzione di inizializzazione al momento del caricamento della finestra.

  • Infine, stiamo chiamando moveRight()funzione per aumentare la distanza sinistra di 10 pixel. Puoi anche impostarlo su un valore negativo per spostarlo sul lato sinistro.

Esempio

Prova il seguente esempio.

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

Produzione

Animazione automatizzata

Nell'esempio sopra, abbiamo visto come un'immagine si sposta a destra a ogni clic. Possiamo automatizzare questo processo utilizzando la funzione JavaScriptsetTimeout() come segue -

Qui abbiamo aggiunto più metodi. Quindi vediamo cosa c'è di nuovo qui -

  • Il moveRight() la funzione sta chiamando setTimeout()funzione per impostare la posizione di imgObj .

  • Abbiamo aggiunto una nuova funzione stop() per cancellare il timer impostato da setTimeout() funzione e per impostare l'oggetto nella sua posizione iniziale.

Esempio

Prova il seguente codice di esempio.

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

Di seguito è riportato un semplice esempio che mostra il rollover dell'immagine con un evento del mouse.

Vediamo cosa stiamo usando nel seguente esempio:

  • Al momento del caricamento di questa pagina, l'istruzione "if" verifica l'esistenza dell'oggetto immagine. Se l'oggetto immagine non è disponibile, questo blocco non verrà eseguito.

  • Il Image() il costruttore crea e precarica un nuovo oggetto immagine chiamato image1.

  • Alla proprietà src viene assegnato il nome del file immagine esterno chiamato /images/html.gif.

  • Allo stesso modo, abbiamo creato image2 oggetto e assegnato /images/http.gif in questo oggetto.

  • Il # (segno cancelletto) disabilita il collegamento in modo che il browser non cerchi di andare a un URL quando viene cliccato. Questo collegamento è un'immagine.

  • Il onMouseOver il gestore di eventi viene attivato quando il mouse dell'utente si sposta sul collegamento e il onMouseOut il gestore di eventi viene attivato quando il mouse dell'utente si allontana dal collegamento (immagine).

  • Quando il mouse si sposta sull'immagine, l'immagine HTTP cambia dalla prima immagine alla seconda. Quando il mouse viene allontanato dall'immagine, viene visualizzata l'immagine originale.

  • Quando il mouse viene allontanato dal collegamento, l'immagine iniziale html.gif riapparirà sullo schermo.

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