- Learn
- Guida Smil 2.0
- Transizioni in pratica
Transizioni in pratica
Nella precedente lezione abbiamo studiato gli elementi ed attributi necessari per gestire gli effetti di transizione in SMIL, ora vediamo qualche esempio concreto.
Partiamo da una semplice galleria fotografica:
<?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=”black” width=”405″ height=”275″/>
<region id=”fotoarea” width=”405″ height=”275″
fit=”slice”/>
</layout>
</head>
<body>
<seq>
<img src=”media/foto1.jpg” dur=”5″ region=”fotoarea”/>
<img src=”media/foto2.jpg” dur=”5″ region=”fotoarea”/>
<img src=”media/foto3.jpg” dur=”5″ region=”fotoarea”/>
</seq>
</body>
</smil>
Ora definiamo tre transizioni per l’entrata delle tre foto della galleria ed applichiamole:
<?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=”black” width=”405″ height=”275″/>
<region id=”fotoarea” width=”405″ height=”275″ fit=”slice”/>
</layout>
<transition id=”tr1″ type=”fade” subtype=”crossfade”/>
<transition id=”tr2″ type=”barWipe” subtype=”leftToRight”/>
<transition id=”tr3″ type=”clockWipe” subtype=”clockwiseTwelve”/>
</head>
<body>
<seq>
<img transIn=”tr1″ src=”media/foto1.jpg” dur=”5″
region=”fotoarea”/>
<img transIn=”tr2″ src=”media/foto2.jpg” dur=”5″
region=”fotoarea”/>
<img transIn=”tr3″ src=”media/foto3.jpg” dur=”5″
region=”fotoarea”/>
</seq>
</body>
</smil>
Per rendere più “morbido” il passaggio tra una foto e l’altra estendiamo la durata delle foto con l’attributo fill
; in più modifichiamo la durata delle transizioni:
<?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=”black” width=”405″ height=”275″/>
<region id=”fotoarea” width=”405″ height=”275″ fit=”slice”/>
</layout>
<transition id=”tr1″ type=”fade” subtype=”crossfade”
dur=”0.5″/>
<transition id=”tr2″ type=”barWipe” subtype=”leftToRight”
dur=”1.5″/>
<transition id=”tr3″ type=”clockWipe” subtype=”clockwiseTwelve”
dur=”2″/>
</head>
<body>
<seq>
<img transIn=”tr1″ src=”media/foto1.jpg” dur=”5″ region=”fotoarea”
fill=”transition”/>
<img transIn=”tr2″ src=”media/foto2.jpg” dur=”5″ region=”fotoarea”
fill=”transition”/>
<img transIn=”tr3″ src=”media/foto3.jpg” dur=”5″ region=”fotoarea”/>
</seq>
</body>
</smil>
Ora non ci manca che applicare una transizione in uscita per l’ultima foto; in più facciamo in modo di riprodurre solo la prima metà della transizione:
<?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=”black” width=”405″ height=”275″/>
<region id=”fotoarea” width=”405″ height=”275″ fit=”slice”/>
</layout>
<transition id=”tr1″ type=”fade” subtype=”crossfade”
dur=”0.5″/>
<transition id=”tr2″ type=”barWipe” subtype=”leftToRight”
dur=”1.5″/>
<transition id=”tr3″ type=”clockWipe” subtype=”clockwiseTwelve”
dur=”2″/>
<transition id=”tr4″ type=”fade” subtype=”crossfade” dur=”1.5″
endProgress=”0.5″/>
</head>
<body>
<seq>
<img transIn=”tr1″ src=”media/foto1.jpg” dur=”5″ region=”fotoarea”
fill=”transition”/>
<img transIn=”tr2″ src=”media/foto2.jpg” dur=”5″ region=”fotoarea”
fill=”transition”/>
<img src=”media/foto3.jpg” dur=”5″ region=”fotoarea”
transIn=”tr3″ transOut=”tr4″/>
</seq>
</body>
</smil>
In questa lezione abbiamo visto alcuni esempi di applicazione di transizioni ad una presentazione SMIL, nella prossima introdurremo le animazioni.
Se vuoi aggiornamenti su Transizioni in pratica inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Sviluppare una App Windows Store con HTML e JavaScript
Partendo da File -> New Project, realizzeremo un’applicazione completa Windows Store in HTML e Javascript, analizzando gli aspetti legati al […]