5 pagine in totale: <<Indietro 1 2 3 4 [5]
Qualora l'animazione per interpolazione lineare di una proprietà non sia più sufficiente, Silverlight dispone di altri oggetti molto flessibili per creare animazioni più complesse. Attraverso DoubleAnimationUsingKeyFrames, ColorAnimationUsingKeyFrames e PointAnimationUsingKeyFrames è possibile decidere il tipo di interpolazione che deve essere utilizzata per calcolare gli stati intermedi della proprietà da animare, con ognuno di essi è infatti possibile utilizzare i rispettivi LinearXXXKeyFrame, SplineXXXKeyFrame e DiscreteXXXKeyFrame corrispondenti al tipo di proprietà Double, Color o Point, in maniera del tutto analoga agli oggetti Animation.
Ad esempio, con LinearDoubleKeyFrame è possibile creare una animazione di spostamento lineare di un oggetto, con DiscreteColorKeyFrame l'interpolazione non è eseguita ed un passaggio di colore avviene un istante prima del termine dell'animazione.
SplineXXXKeyFrame è decisamente il più interessante poiché calcola i valori intermedi attraverso una funzione comparabile ad una curva di Bezier , attraverso la sua proprietà KeySpline è possibile specificare le coordinate dei punti di controllo dei due vertici della curva:

L'adozione di questo tipo di interpolazione consente una rapida creazione di animazioni realistiche come accelerazioni, decelerazioni ed altri effetti senza avere la necessità di calcoli matematici.
Gli oggetti di tipo KeyFrames seguono il principio di animazione Frame-By-Frame , in essi sono specificati il valore da assumere con la proprietà Value, il tempo nel quale variare la proprietà con KeyTime e, nel caso di SplineXXXKeyFrame , le coordinate dei punti di controllo con KeySpline .
Per una gestione delle animazioni legata ad eventi specifici dell'utente e non, le Storyboard possono essere dichiarate all'interno della proprietà Resources di un oggetto:
<Canvas.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="rectangle1"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="00:00:04" Value="200"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Canvas.Resources>
<Rectangle Width="50" Height="60" x:Name="rectangle1"
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.RenderTransform>
<TransformGroup>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
In questo esempio l'animazione di spostamento del rettangolo, corrispondente alla Storyboard Storyboard1 , fa parte di una risorsa del Canvas principale del progetto e pertanto non viene eseguita automaticamente alla fine del caricamento del rettangolo; attraverso le Resources è possibile attivare o sospendere l'animazione in funzione di specifici eventi.
Conclusioni
XAML è il linguaggio sviluppato da Microsoft per la realizzazione di interfacce grafiche di nuova generazione. Silverlight consente di sfruttarne alcune delle potenzialità base per realizzare siti web accattivanti ed interattivi. In questo articolo e nel precedente articolo sono stati introdotti i principi della sintassi e degli oggetti principali con cui realizzare le interfacce grafiche dei propri progetti.
Una minima conoscenza di XAML è propedeutica all'utilizzo dei tool visuali con i quali iniziare realmente a creare i layout dei siti web, successivamente lavorare con Expression Designer ed Expression Blend sarà molto facile ed il loro utilizzo in sinergia consentirà un'ottima produttività.
5 pagine in totale: <<Indietro 1 2 3 4 [5]
Attenzione: Questo articolo contiene un allegato
Contenuti dell'articolo
- Pagina 1
- Pagina 2
- Pagina 3
- Pagina 5
Aggiungi un nuovo commento »»»
Per inserire un commento, devi registrarti alla nostra community.







Difficoltà

Stampa
Download


10annidi.ASPItalia.com: iscriviti alla competizione e vinci fantastici premi ogni mese!
