• Web Design » Silverlight » Manuale Silverlight

Silverlight: animazioni

Tutti gli elementi nei file XAML di Silverlight rappresentanooggetti del .NET Framework e di Silverlight. Gli oggettipossiedono proprietà con valori che possono esseremodificati. Un'animazione avviene attraverso laprogressiva modificazione di un valore di unaproprietà per un certo periodo di tempo. Ad esempio,la proprietà riguardante l'angolo di rotazione diuna trasformazione può essere progressivamentemodificato per un certo numero di secondi per far si che iltesto ruoti.

Ci sono due categorie di animazioni: le animazionida/a e le key-frame. Per le prime, ilperiodo di tempo dell'animazione viene tipicamentegestito dalla proprietà di durata, mentre il valore dipartenza e di termine delle proprietà vengonospecificati usando le proprietà da/a. Lekey-frame sono più complesse da implementarema offrono maggiori potenzialità. Inquest'articolo focalizzeremo la nostra attenzione sulleanimazioni da/a.

Le animazioni in Silverlight vengono implementate attraversodegli oggetti d'animazione. Questi oggetti derivanodall'oggetto Timeline. Solo leproprietà i cui valori sono di tipodouble, Color o Pointpossono essere animate. Un oggettoDoubleAnimation viene usato per animare unaproprietà di un oggetto di tipo double. Un oggettoColorAnimation viene usato per animare unaproprietà dell'oggetto di tipo Colormentre un oggetto PointAnimation viene usato peranimare una proprietà dell'oggetto di tipoPoint.

Il codice sottostante aumenta la grandezza del font del testopresente nel text block denominato tbWebucatorda 10.0 a 44.0 per 5 secondi.

<TextBlockFontFamily="Segoe UI"FontSize="44"Width="240"Height="80"Canvas.Left="80"Canvas.Top="80"Text="Webucator"x:Name="tbWebucator"><TextBlock.Triggers>  <EventTrigger RoutedEvent="TextBlock.Loaded">    <BeginStoryboard><Storyboard>  <DoubleAnimation Storyboard.TargetName="tbWebucator" Storyboard.TargetProperty="FontSize" From="10.0" To="44.0" Duration="0:0:5" /></Storyboard>    </BeginStoryboard>  </EventTrigger></TextBlock.Triggers></TextBlock>

Come illustrato nel codice appena presentato, un oggettoDoubleAnimation dev'essere contenutoall'interno di un elemento<StoryBoard>. Questo elemento puòcontenere più di un'animazione e gli si deveassociare un evento. Nell'esempio presentato,all'elemento <StoryBoard> vieneassociato l'evento <BeginStoryBoard>.Un evento deve essere inizializzato dall'elemento<EventTrigger>, che nell'esempiopresentato viene lanciato per l'eventoLoaded del TextBlock. Ogni elementopuò contenere più trigger e tutti i triggerassociati ad un elemento devono essere contenuti dentro unacollezione di trigger per quell'elemento.

Il codice dell'esempio è configurato in modo taleda essere eseguito automaticamente non appena il text blockè stato caricato. Le animazioni possono anche esserecontrollate. Per farlo, assicurarsi che l'elementodell'animazione abbia un nome e successivamente invocareil metodo associato all'azione desiderata. Ad esempio,per far partire un'animazione, richiamate il metodoBegin.

Il comportamento di un'animazione può essereutlteriormente controllato usando degli attributiaddizionali. Ad esempio, l'animazione presentata inprecedenza verrà eseguita una sola volta. Se si vuoleeseguire l'animazione più volte, si deve settareil numero di volte che deve ripetersi nell'attributoRepeatBehavior (settare"Forever" per eseguirlaall'infinito).

Un'animazione può esser configurata per essereseguita al contrario una volta completata la sua esecuzionesettando a "true" la proprietàAutoReverse.

Come esempio più complesso, presentiamo il seguentecodice usato per creare un'animazione che include unapalla rimbalzante su uno sfondo che cambia colore.

Es 1: Page.xaml

<TextBlockFontFamily="Segoe UI"FontSize="44"Width="240"Height="80"Canvas.Left="80"Canvas.Top="80"Text="Webucator"x:Name="tbWebucator"><TextBlock.Triggers>  <EventTrigger RoutedEvent="TextBlock.Loaded">    <BeginStoryboard><Storyboard>  <DoubleAnimation Storyboard.TargetName="tbWebucator" Storyboard.TargetProperty="FontSize" From="10.0" To="44.0" Duration="0:0:5" /></Storyboard>    </BeginStoryboard>  </EventTrigger></TextBlock.Triggers></TextBlock>

Ed ecco l'immagine raffigurante l'esempio appenapresentato.

Fig 1: Risultato finale