Nella scorsa lezione abbiamo visto gli attributi necessari a specificare manipolazioni del tempo, ora costruiremo una presentazione che sfrutta tali funzionalità.
Prendiamo una versione semplificata della presentazione costruita due lezioni fa:
...
<body>
<par dur="10">
<img src="media/particolare.jpg" fit="meet" dur="10">
<animate dur="10" attributeName="left" from="0" to="355"/>
</img>
</par>
</body>
...
Inseriamo, a questo punto, un effetto di accelerazione in entrata e di decelerazione in uscita all’animazione:
...
<body>
<par dur="10">
<img src="media/particolare.jpg" fit="meet" dur="10">
<animate dur="10" attributeName="left" from="0" to="355"
accelerate="0.3" decelerate="0.3" />
</img>
</par>
</body>
...
Procediamo inserendo un’altra animazione che faccia oscillare verticalmente l’immagine, esattamente come due lezioni fa, solo che ora utilizziamo l’attributo autoReverse:
...
<body>
<par dur="10">
<img src="media/particolare.jpg" fit="meet" dur="10">
<animate dur="10" attributeName="left" from="0" to="355" accelerate="0.3" decelerate="0.3" />
<animate dur="1" attributeName="top" from="0" to="50"
autoReverse="true" repeatCount="5" />
</img>
</par>
</body>
...
Infine riproduciamo il tutto al doppio della velocità:
<?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" />
</layout>
</head>
<body>
<par dur="10" speed="2">
<img src="media/particolare.jpg" fit="meet" dur="10">
<animate dur="10" attributeName="left" from="0" to="355" accelerate="0.3" decelerate="0.3" />
<animate dur="1" attributeName="top" from="0" to="50" repeatCount="5" autoReverse="true" />
</img>
</par>
</body>
</smil>
In questa lezione abbiamo costruito una presentazione che sfrutta le funzionalità di manipolazione del tempo; nella prossima lezione impareremo ad adattare il contenuto di una presentazione alle capacità dei singoli sistemi.