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.
17 / 30

Manipolazione del tempo

I Video di HTML.it

Baasbox, un back-end semplice e open source