La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

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

Presentazioni simili


Presentazione sul tema: "Animazioni con le immagini Mettere assieme cambio di src, linea temporale, e posizionamento per una prima animazione 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 Lattributo SRC di IMG Lelemento HTML per le immagini visualizza nella pagina limmagine individuata dal file indicato con lattributo src. Esempio visualizza limmagine 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 dallattributo SRC di un elemento IMG. Il browser automaticamente visualizzerà limmagine del nuovo file Occorre innanzitutto identificare limmagine con un nome ID. Le istruzioni JS sono quindi le seguenti: var x=document.getElementById("myimg"); x.src = "duke/duke2.gif"; La prima istruzione rileva lelemento HTML e la seconda sostituisce limmagine 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 laggiunta 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 limmagine, 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 lanimazione completa Nello script vanno aggiunti degli else if va cambiato quando riportare a 1 il valore di n Visualizzata per n=1 n=2n=3 n=4

7 Aggiungere il movimento Oltre che cambiare il file immagine, è possibile muovere limmagine 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 limmagine. E possibile gestire quindi in modo indipendente le due animazioni, che verranno a sovrapporsi.

8 Aggiungere il movimento Aggiungere il posizionamento nellelemento IMG 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);


Scaricare ppt "Animazioni con le immagini Mettere assieme cambio di src, linea temporale, e posizionamento per una prima animazione con le immagini."

Presentazioni simili


Annunci Google