Animazioni con le immagini

Presentazione sul tema: "Animazioni con le immagini"— Transcript della presentazione:

1 Animazioni con le immagini
Mettere assieme cambio di src, linea temporale, e posizionamento per una prima animazione con le immagini

2 L’attributo SRC di IMG L’elemento HTML per le immagini visualizza nella pagina l’immagine individuata dal file indicato con l’attributo src. Esempio <IMG SRC="duke/duke1.gif"> visualizza l’immagine duke1.gif contenuta nella cartella duke.

3 Cambiare SRC con JavaScript
Tramite JavaScript è possibile cambiare dinamicamente (cioè anche dopo il caricamento della pagina) il file linkato dall’attributo SRC di un elemento IMG. Il browser automaticamente visualizzerà l’immagine del nuovo file Occorre innanzitutto identificare l’immagine con un nome ID. <IMG ID="myimg" SRC="duke/duke1.gif"> Le istruzioni JS sono quindi le seguenti: var x=document.getElementById("myimg"); x.src = "duke/duke2.gif"; La prima istruzione rileva l’elemento HTML e la seconda sostituisce l’immagine duke1.gif con quella duke2.gif

4 Cambiare nel tempo Il cambio di file immagine non produce nessun effetto, perché questo viene fatto al caricamento della pagina e non viene neppure percepito, perché immediato. Con l’aggiunta di una linea temporale, il cambio di immagine può essere ritardato e quindi visualizzato var x=document.getElementById("myimg"); function cambia() { x.src = "duke/duke2.gif"; } setInterval("cambia()",1000); // cambia dopo 1 secondo

5 Cambiare ripetutamente nel tempo
Se il cambio del file viene fatto ripetutamente, allora si ha una animazione. Per alternare l’immagine, usiamo una variabile intera alla quale diamo alternativamente valore 1 e 2. n=1; var x=document.getElementById("myimg"); function cambia() { if (n==1) x.src = "duke/duke2.gif"; else x.src = "duke/duke1.gif"; n++; if (n>2) n=1; // deve alternare 1 e 2 } setInterval("cambia()",500); // cambia dopo 1/2 secondo

6 Alternare più immagini
Per avere una animazione più realistica, occorre alternare più immagini che differiscono di poco. Utilizzare tutte e quattro immagini date di duke per ottenere l’animazione completa Nello script vanno aggiunti degli else if va cambiato quando riportare a 1 il valore di n Visualizzata per n=1 n=2 n=3 n=4

7 Aggiungere il movimento
Oltre che cambiare il file immagine, è possibile muovere l’immagine nella pagina, usando il posizionamento HTML e le proprietà left e top di JavaScript. Dal momento che è possibile utilizzare più linee temporali, è possibile usare un altro setInterval per muovere l’immagine. E’ possibile gestire quindi in modo indipendente le due animazioni, che verranno a sovrapporsi.

8 Aggiungere il movimento
Aggiungere il posizionamento nell’elemento IMG <IMG ID="myimg" SRC="duke/duke1.gif" style="position:absolute; top: 200; left: 0"> Aggiungere nello script precedente la funzione per il movimento ed il timer per esso function muovi_a_destra() { x.style.left = parseInt(x.style.left) + 20; } setInterval("muovi_a_destra()",200);