Animazioni avanzate

Le classi viste nelle precedenti lezioni permettono di realizzare solo animazioni lineari, che modificano il valore di una proprietà, passando da un valore iniziale ad uno finale in un dato periodo di tempo, il tutto in maniera sequenziale.

Questa soluzione, valida nella maggior parte dei contesti, in scenari complessi può avere dei limiti. Silverlight fornisce un modello ad oggetti alternativo che permette di esprimere con maggior dettaglio gli stati degli elementi che partecipano all'animazione, descrivendo i fotogrammi che la compongono. In questo tipo di animazioni indichiamo per ogni istante (frame) il valore esatto da assegnare ad una proprietà.

Dato che il concetto di animazione rimane identico, ovvero quello della modifica di una proprietà in un dato periodo, anche in questo caso troviamo diverse implementazioni di Animation, ognuna specifica per un certo tipo di dato, per esempio se per il modello lineare troviamo la classe DoubleAnimation per quello a fotogrammi abbiamo DoubleAnimationUsingKeyFrames. Ognuna di esse accetta come elementi figlio un elenco di oggetti KeyFrame, per ognuno dei quali indichiamo l'istante (KeyTime) nel quale il frame entra in gioco ed il valore da applicare (Value) alla proprietà.

Vediamo un primo esempio di definizione di una animazioni a fotogrammi.

<Storyboard x:Name="MyStoryboard">
  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyRectangle"
                                 Storyboard.TargetProperty="Width">
    
    <LinearDoubleKeyFrame KeyTime="0:0:1" Value="200" />
    <LinearDoubleKeyFrame KeyTime="0:0:2" Value="180" />
    <LinearDoubleKeyFrame KeyTime="0:0:3" Value="300" />
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

Nel precedente frammento di codice definiamo tre fotogrammi attivati ogni secondo in maniera incrementale per la durata totale di tre secondi. Eseguendo l'animazione non notiamo particolari differenze rispetto all'uso di oggetti base come DoubleAnimation, però guardando nel dettaglio i valori attribuiti alla proprietà Width possiamo notare che, mentre nel primo e terzo frame la dimensione del rettangolo aumenta, nel secondo diminuisce: operazione non direttamente possibile con DoubleAnimation, a patto che non utilizziamo questi oggetti singolarmente come se fossero singoli frame invece di intere animazioni.

Il vantaggio maggiore nell'uso delle animazioni a fotogramma sta nel fatto che per la singola animazione posso utilizzare tipi diversi di interpolazione, nell'esempio precedente abbiamo utilizzato l'elemento LinearDoubleKeyFrame che effettua una transizione lineare del valore della proprietà animata, proprio come DoubleAnimation, ecco perché non notiamo particolari differenze. Nella seguente tabella sono descritti tutti i tipi di KeyFrame, dei quali a sua volta esiste un'apposita versione per ogni tipo di dato supportato, Double, Color e Point.