Che cosa hanno in comune una cipolla e Topolino? Da una prima analisi nulla, ed effettivamente non potrebbe essere altrimenti, ma solo se escludiamo che una delle tecniche più usate nel mondo dell'animazione, l'Onion Skin, deve il suo nome alla similitudine tra la carta   usata dai disegnatori, sottilissima e semitrasparente e la buccia del saporito bulbo.

L'animazione, sia questa di un film che di un cartone animato, è un'illusione ottenuta mostrando una serie d'immagini in rapida successione, ogni immagine, differisce leggermente dalla precedente quel tanto che basta a far percepire al nostro cervello queste differenze come un movimento.

L'animazione digitale e quella tradizionale

Nell'animazione tradizionale, quella realizzata con tanto di carta e matita, per disegnate tutte le immagini necessarie a creare un'animazione, il disegnatore si aiutava, e in alcuni casi è così ancora oggi, disegnando su di un foglio sottilissimo (Onion Skin).

L'artista creava ogni singola immagine (fotogramma) dell'animazione su un singolo foglio, sfruttando lo spessore ridotto della carta e grazie all'aiuto di un tavolo retroilluminato soprapponeva al disegno appena realizzato un nuovo foglio, ricopiava le parti da mantenere immobili e alterava quelle da animare, andando avanti fin quando l'animazione non era completa e fluida.

Nell'animazione digitale questa tecnica è stata riprodotta da alcuni programmi semplicemente visualizzando i vari disegni soprapposti con diversi livelli di opacità.

Silverlight segue una filosofia completamente differente, ogni elemento visualizzato nell'area del Plug-In è un oggetto, il cui stato dipende dalle sue proprietà, ad esempio la sua posizione rispetto al margine superiore dell'area del Plug-In è determinata impostando le proprietà Canvas.Top.

Quinti per creare un'animazione, che consiste nello spostare ad esempio un oggetto dall'alto verso il basso, è necessario assegnare alla proprietà Canvas.Top valori differenti nel tempo.

Poiché è molto probabile che un elemento dell'interfaccia esponga più di una proprietà, e che ognuna di esse possa essere di un tipo differente, al fine di generare il valore del tipo corretto, è necessario usare uno strumento adatto a ognuna di esse.

In particolare alcuni di questi "strumenti" sono:

• DoubleAnimation, per le proprietà di tipo double, ad esempio Canvas.Top.
• ColorAnimation, che come è possibile intuire dal nome si occupa delle proprietà di tipo Color, come ad'esempio Background.
• PointAnimation, per tutte quelle proprietà di tipo Point, ad esempio i diversi punti che formano un Path.

Anche se gli oggetti precedenti, riescono dati due valori, a calcolare per tipi Point, Color e Double le interpolazioni necessarie a realizzare una transazione fluida, utilizzati da soli, non possiedono nessuna informazione sull'oggetto ne la proprietà a cui questi valori vanno associati.

L'onere di fornire queste informazioni è delegato a un oggetto chiamato StoryBoard, responsabile di raggruppare e orchestrare più animazioni, non che, indicare l'oggetto destinazione mediante l'utilizzo dell'Attached Propertie Storyboard.TargetName e la proprietà con Storyboard.TargetProperty, inoltre è possibile specificare la durata complessiva del singolo ciclo d'animazione mediante la proprietà Duration.

Deciso cosa e come animarlo, rimane da definire quando riprodurre l'animazione, questa operazione coinvolge due oggetti, l'EventTrigger,il quale attende il verificarsi di un evento per eseguire un operazione, e BeginStoryboard l'unica azione capace di far iniziare la riproduzione.

Dopo questa breve introduzione è il momento di passare all'azione, apriamo Blend 2 (December Preview), come lascia intuire il nome, si tratta di un software ancora in fase di sviluppo e il prodotto finale potrebbe differire da quando mostrato in quest'articolo.

Creiamo un nuovo progetto, chiamiamolo SimpleExemple e impostiamo un colore di sfondo.

Al centro della scena collochiamo un rettangolo rosso.