Chiarite l'affinità tra Storyboard e animazione proseguiamo impostando i valori che quest'ultima dovrà gestire, mediante la proprietà From è possibile specificare il valore della proprietà all'avvio dell'animazione, questo passaggio è facoltativo, in sua assenza l'animazione inizierà dal valore corrente della proprietà.

Infine indichiamo mediante la proprietà To il valore da raggiungere al terminare dell'animazione.

Se definire l'utilizzo di  From e To, non fosse adatto alla nostra animazione, esiste la possibilità mediante la proprietà By, di impostare il valore che verrà sommato al valore corrente della proprietà.

Ciak! Azione!

Senza indugio premiamo F5, non appena la pagina sarà caricata vedremo il nostro rettangolo scendere rapidamente verso il basso per poi fermasi, poiché il valore della proprietà To specificato dalla Doubleanimatio è stato raggiunto.

Apportiamo una piccola modifica allo Stroryboard, impostando la proprietà RepeatBehavior su Forever.

Lanciamo nuovamente la nostra animazione, come previsto il rettangolo scende verso il basso esattamente come avveniva prima della modifica, ma rimane fermo per un tot di secondi prima di ripartire, viene da chiedersi per quale motivo, poiché nessuna pausa è stata inserita nell'animazione.

La risposta è semplice, e consiste nella diversa interpretazione, da parte del Storyboard e dell'animazione del valore "Automatic" che la proprietà Duration può assumere.

Nel nostro esempio impostiamo la durata dell'animazione utilizzando lo Storyboard e non la Doubleanimation, così facendo la proprietà Duration di quest'ultima, assume il valore predefinito "Automatic" che consiste in un TimeSpan di un secondo, il nostro rettangolo termina quindi rapidamente la sua corsa, per poi rimanere in attesa per il tempo residuo impostato nello StoryBoard.

A conferma di quando detto, apportiamo un ulteriore modifica alla nostra animazione impostando la proprietà Duration direttamente sulla Doubleanimation.

Adesso il rettangolo raggiunge lentamente il fondo del Canvas, per poi iniziare subito un nuovo ciclo d'animazione senza pause.

In questo caso è la proprietà Duration dello Storyboard ad assumere il valore Automatic, per adattarsi alla durata della DoubleAnimation.

Impostando quindi in modo esplicito la durata dell'animazione nello Storyboard, dovremmo assicurarci che questa sia sufficientemente lunga da non tagliare nessuna dell'animazioni figlie, infatti se lo Storyboard durasse ad esempio due secondi tutte le animazioni figlie più lunghe sarebbero interrotte prima del loro termine naturale.

Analizzando il codice degli esempi precedenti, potremo chiederci, vista la possibilità dello Storyboard di contenere più animazioni, se ognuna di essa possa solo fare riferimento alla singola proprietà e oggetto specificato nello Storyboard contenitore.

Se questo fosse vero, ci troveremmo davanti ad un grosso limite, per fortuna non è così, e possiamo specificare l'oggetto e la proprietà da animare direttamente nell'animazione.

E quindi aggiungere un qualsiasi numero di animazioni:

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