Redazione
a- a+

Animazioni

Silverlight: animazioni

Tutti gli elementi nei file XAML di Silverlight rappresentano oggetti del .NET Framework e di Silverlight. Gli oggetti possiedono proprietà con valori che possono essere modificati. Un'animazione avviene attraverso la progressiva modificazione di un valore di una proprietà per un certo periodo di tempo. Ad esempio, la proprietà riguardante l'angolo di rotazione di una trasformazione può essere progressivamente modificato per un certo numero di secondi per far si che il testo ruoti.

Ci sono due categorie di animazioni: le animazioni da/a e le key-frame. Per le prime, il periodo di tempo dell'animazione viene tipicamente gestito dalla proprietà di durata, mentre il valore di partenza e di termine delle proprietà vengono specificati usando le proprietà da/a. Le key-frame sono più complesse da implementare ma offrono maggiori potenzialità. In quest'articolo focalizzeremo la nostra attenzione sulle animazioni da/a.

Le animazioni in Silverlight vengono implementate attraverso degli oggetti d'animazione. Questi oggetti derivano dall'oggetto Timeline. Solo le proprietà i cui valori sono di tipo double, Color o Point possono essere animate. Un oggetto DoubleAnimation viene usato per animare una proprietà di un oggetto di tipo double. Un oggetto ColorAnimation viene usato per animare una proprietà dell'oggetto di tipo Color mentre un oggetto PointAnimation viene usato per animare una proprietà dell'oggetto di tipo Point.

Il codice sottostante aumenta la grandezza del font del testo presente nel text block denominato tbWebucator da 10.0 a 44.0 per 5 secondi.

<TextBlock
      FontFamily="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>

 

<a href="/img/11/iframe_anim1.html" title="Vedi esempio">Vedi esempio</a>;

 

Come illustrato nel codice appena presentato, un oggetto DoubleAnimation dev'essere contenuto all'interno di un elemento <StoryBoard>. Questo elemento può contenere più di un'animazione e gli si deve associare un evento. Nell'esempio presentato, all'elemento <StoryBoard> viene associato l'evento <BeginStoryBoard>. Un evento deve essere inizializzato dall'elemento <EventTrigger>, che nell'esempio presentato viene lanciato per l'evento Loaded del TextBlock. Ogni elemento può contenere più trigger e tutti i trigger associati ad un elemento devono essere contenuti dentro una collezione di trigger per quell'elemento.

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

Il comportamento di un'animazione può essere utlteriormente controllato usando degli attributi addizionali. Ad esempio, l'animazione presentata in precedenza verrà eseguita una sola volta. Se si vuole eseguire l'animazione più volte, si deve settare il numero di volte che deve ripetersi nell'attributo RepeatBehavior (settare "Forever" per eseguirla all'infinito).

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

Come esempio più complesso, presentiamo il seguente codice usato per creare un'animazione che include una palla rimbalzante su uno sfondo che cambia colore.

Es 1: Page.xaml

<TextBlock
      FontFamily="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>

 

<a href="/img/11/iframe_anim1.html" title="Vedi esempio">Vedi esempio</a>;

 

Ed ecco l'immagine raffigurante l'esempio appena presentato.

Risultato
Fig 1: Risultato finale



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Lorenzo
Hai qualche domanda da fare?