Ricordiamoci di assegnare un nome al nostro rettangolo, in sua assenza, sarebbe naturalmente impossibile referenziarlo tramite l'Attached Properties Storyboard.TargetName, senza sprecare troppa della nostra fantasia chiameremo la nostra opera RedRectagle.

Premiamo il tasto F11 per lasciare la modalità Design e passare alla visualizzazione dello XAML così da poter analizzare e modificare il codice.

L'uso dei triggers

In Silverlight ogni elemento dell'interfaccia, ivi compreso il nostro rettangolo, espone una proprietà chiamata Triggers, è qui, tra il tag di apertura e chiusura di quest'elemento che andremo ad aggiungere L'EventTrigger.

Il compito dell'EventTrigger è di rimanere in attesa dell'evento impostato mediante la proprietà RoutedEvent, ed eseguire, alla sua occorrenza una serie di operazioni, nel nostro caso iniziare la riproduzione dell'animazione mediante l'azione BeginSotryboard.

Nella versione 1.0 di Silverlight l'unico evento che è possibile intercettare è l'evento Loaded, che avviene nel momento in cui un oggetto è elaborato correttamente dal Plug-In ma non ancora visualizzato, integriamo quindi il codice precedente con le seguenti righe.

Analizzando il codice precedente ritroviamo gli elementi discussi in precedenza, l'azione BeginStoriboard contiene un solo Storyboard, anche se come vedremo in seguito sarà possibile aggiungerne più di uno.

Le Attached Properties TargetName e TargetProperty impostate tramite lo Storyboard specificano rispettivamente l'oggetto da animare e la proprietà.

Per il primo è sufficiente indicare semplicemente il nome dell'oggetto, mentre per il secondo, è possibile sia utilizzare semplicemente il nome della proprietà, ma ricorrendo una sintassi più articolata, nel caso una proprietà restituisca un oggetto, fare riferimento a le proprietà di tale oggetto, in questo caso si parla di animazione indiretta.

Oltre a determinare l'oggetto da animare lo Storyboard ha la responsabilità di impostare mediante la proprietà Duration la durata complessiva dell'intero ciclo dell'animazione.

Il formato per impostare la proprietà Duration è il seguente: [giorni.]ore:minuti:secondi[.frazione di secondo] , le parentesi quadre indicano dei valori facoltativi, e naturalmente non devono comparire.

Il valore delle ore deve essere un intero compreso tra 0 e 23, mentre per i minuti e i secondi questo valore è compreso tra 0 e 59, nel caso dei giorni non ci sono limiti, anche se un animazione dalla durata di giorni difficilmente potrà mantenere vigile l'attenzione di qualche navigatore, indichiamo inoltre che l'animazione deve essere ripetuta all'infinito impostando la proprietà RepeatBeahavior su Forever.

Oltre al formato già illustrato in precedenza, è possibile utilizzare alcune stringhe che sono trattate in modo particolare, come Automatic e Forever, il primo dei quali assume comportamenti differenti nel caso sia specificato nello Storyboard o su un animazione.

Spulciando l'SDK notiamo infatti che sia lo Storyboard che le animazione derivano dal tipo Timeline ed è infatti quest'ultimo a fornire le seguenti proprietà tra cui naturalmente RepeatBehavior .

• AutoReverse: una volta raggiunta la fine di una Timeline, questa è eseguita di nuoma ma in senso opposto, creando di fatto due animazioni.
• BeginTime: è l'intervallo che deve intercorrere tra il verificarsi dell'azione BeginStoriboard e l'inizio dell'animazione.
• FillBehavior: determina il comportamento una volta terminata un'animazione, i valori disponibili sono due: Stop, che riporta l'oggetto nello stato iniziale e HoldEnd che lascia l'oggetto nello stato al termine dell'animazione.
• RepeatBehavior:indica quante volte l'animazione deve essere eseguita, è possibile farlo utilizzando una sintassi identica a quella utilizzata per la proprietà Duration, altrimenti possiamo specificare quante volte ripetere l'esecuzione dell'animazione con la sintazzi [intero]X, ad esempio specificando 2X l'animazione sarà eseguita due volte, infine l'ultima impostazione disponibile è Forever e consiste nell'eseguire l'animazione per sempre.
• SpeedRatio: determina la velocità d'esecuzione dell'animazione o dello Storyboard, il valore predefinito è 1, portandolo a 2 la velocità d'esecuzione risulterà doppia.

Attenzione: Questo articolo contiene un allegato

Contenuti dell'articolo

• Pagina 1
  • L'animazione digitale e quella tradizionale
• Pagina 2
  • L'uso dei triggers
• Pagina 3
  • Ciak! Azione!
• Pagina 4
  • Key Frame
  • Animare con Blend
• Pagina 6
  • Conclusioni