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.