- Learn
- Guida Smil 2.0
- Esempi di animazione
Esempi di animazione
In questa lezione esamineremo alcuni esempi di animazione, utilizzando in pratica ciò che abbiamo visto nella lezione precedente sull’animazione degli elementi SVG. Per prima cosa scriviamo una presentazione con alcune immagini:
<?xml version="1.0"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.org/2001/SMIL20/SMIL20.dtd">
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="white" width="405" height="275"/>
</layout>
</head>
<body>
<par dur="10">
<img src="media/particolare.jpg" fit="meet" dur="10" width="50" height="50" />
<img src="media/paesaggio.jpg" fit="meet" dur="10" width="150" height="150" />
</par>
</body>
</smil>
Notiamo l’uso degli attributi width
, height
, fit
e dur
, indispensabili per poter poi applicare le animazioni. Per prima cosa facciamo spostare la prima immagine da sinistra a destra lungo tutta la larghezza della presentazione:
<?xml version="1.0"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.org/2001/SMIL20/SMIL20.dtd">
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="white" width="405" height="275"/>
</layout>
</head>
<body>
<par dur="10">
<img src="media/particolare.jpg" width="50" height="50" fit="meet" dur="10">
<animate dur="10" attributeName="left" from="0" to="355"/>
</img>
<img src="media/paesaggio.jpg" width="150" height="150" fit="meet" dur="10"/>
</par>
</body>
</smil>
Ora possiamo aggiungere un altro effetto di animazione che si vada a sommare al primo, in modo da far muovere la prima immagine su di un percorso a forma di onda:
<?xml version="1.0"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.org/2001/SMIL20/SMIL20.dtd">
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="white" width="405" height="275"/>
</layout>
</head>
<body>
<par dur="10">
<img src="media/particolare.jpg" fit="meet" dur="10" width="50" height="50">
<animate dur="10" attributeName="left" from="0" to="355"/>
</img>
<img src="media/paesaggio.jpg" fit="meet" dur="10" width="150" height="150" />
</par>
</body>
</smil>
Da notare l’uso dell’attributo repeatCount
; aggiungiamo un ulteriore effetto di pulsazione all’immagine, ma solo dopo il terzo secondo di presentazione:
<?xml version="1.0"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.org/2001/SMIL20/SMIL20.dtd">
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="white" width="405" height="275"/>
</layout>
</head>
<body>
<par dur="10">
<img src="media/particolare.jpg" fit="meet" dur="10" width="50" height="50">
<animate dur="10" attributeName="left" from="0" to="355"/>
<animate dur="2" attributeName="top" values="0; 50; 0"
repeatCount="5"/>
</img>
<img src="media/paesaggio.jpg" fit="meet" dur="10" width="150" height="150" />
</par>
</body>
</smil>
Per finire animiamo la seconda immagine, in modo da farla entrare dall’angolo in basso a sinistra, per poi scomparire verso destra, dopo un’attesa di 2 secondi; l’uso delle durate di animazione pari a “2.01” serve per evitare “salti” tra un’animazione e la successiva:
<?xml version="1.0"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.org/2001/SMIL20/SMIL20.dtd">
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<layout>
<root-layout backgroundColor="white" width="405" height="275"/>
</layout>
</head>
<body>
<par dur="10">
<img src="media/particolare.jpg" fit="meet" dur="10" width="50" height="50">
<animate dur="10" attributeName="left" from="0" to="355"/>
<animate dur="2" attributeName="top" values="0; 50; 0" repeatCount="5"/>
<animate dur="1" attributeName="width" values="50; 80; 50" begin="3" repeatDur="7"/>
<animate dur="1" attributeName="height" values="50; 80; 50" begin="3" repeatDur="7"/>
</img>
<img src="media/paesaggio.jpg" width="150" height="150" fit="meet" dur="10" />
</par>
</body>
</smil>
In questa lezione abbiamo visto alcuni esempi pratici di animazioni, nella prossima studieremo le funzionalità di manipolazione del tempo.
Se vuoi aggiornamenti su CSS inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Disegnare campi di input in stile Twitter
In questo video vedremo come personalizzare i campi di input di un sito web imitando lo stile di Twitter, uno […]