ES6 - 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
In questo capitolo vedremo 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 logica o una funzione.
JavaScript fornisce le seguenti funzioni da utilizzare frequentemente nei programmi di animazione.
setTimeout(funzione, durata) - Questa funzione chiama la funzione dopo la durata dei millisecondi da ora.
setInterval(funzione, durata) - Questa funzione chiama la funzione dopo ogni millisecondi di durata.
clearTimeout(setTimeout_variable) - Questa funzione cancella qualsiasi timer impostato dalla funzione setTimeout ().
JavaScript può anche impostare una serie di attributi di un oggetto DOM inclusa la sua posizione sullo schermo. È possibile impostare gli attributi superiore e sinistro di un oggetto per posizionarlo ovunque sullo schermo. Di seguito è riportata la sintassi per lo stesso.
// 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 abbiamo impostato la sua posizione e gli attributi left.
Stiamo chiamando la funzione di inizializzazione al momento del caricamento della finestra.
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>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 la funzione setTimeout () per impostare la posizione di imgObj.
Abbiamo aggiunto una nuova funzione stop() per cancellare il timer impostato dalla funzione setTimeout () 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
Ecco 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.
Il src alla proprietà 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 tenti di accedere 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>