Guide HTML Java Linguaggio C Python JavaScript PHP C++CSS Android Approfondimenti

Esempi di animazione

di Alessandro Meo
27 Settembre 2006

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.