Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Esempi di manipolazione del tempo

Costruire una piccola presentazione che sfrutti effetti di accelerazione e decelerazione
Costruire una piccola presentazione che sfrutti effetti di accelerazione e decelerazione
Link copiato negli appunti

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" width="50" height="50" 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" width="50" height="50" 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" width="50" height="50" 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" width="405" height="275"/>
</layout>
</head>

<body>
<par dur="10" speed="2">
  <img src="media/particolare.jpg" width="50" height="50" 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.

Ti consigliamo anche