1 / 8

Animazioni con le immagini

Animazioni con le immagini. Mettere assieme cambio di src, linea temporale, e posizionamento per una prima animazione con le immagini. L’attributo SRC di IMG. L’elemento HTML per le immagini visualizza nella pagina l’immagine individuata dal file indicato con l’attributo src.

raanan
Télécharger la présentation

Animazioni con le immagini

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 ifva 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);

More Related