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

Le animazioni

I Video di HTML.it

Giorgio Di Nardo, sviluppo app mobile-first