- Learn
- Guida Silverlight
- Le spline
Le spline
Il massimo della versatilità ed espressività lo raggiungiamo utilizzando il tipo Spline, come dimostrato dal prossimo esempio, nel quale muoviamo il rettangolo lungo tutta la superficie del Canvas ed a velocità differenti.
<Canvas x:Name="LayoutRoot" Background="Azure">
<Canvas.Resources>
<Storyboard x:Name="MyStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="(Canvas.Left)"
Duration="0:0:8">
<SplineDoubleKeyFrame Value="300" KeyTime="0:0:2"
KeySpline="0.25,0.75 0.75,0.25" />
<SplineDoubleKeyFrame Value="100" KeyTime="0:0:4"
KeySpline="0.75,0.25 0.25,0.75" />
<SplineDoubleKeyFrame Value="50" KeyTime="0:0:6"
KeySpline="0.25,0.75 0.75,0.25" />
<SplineDoubleKeyFrame Value="200" KeyTime="0:0:8"
KeySpline="0.75,0.25 0.25,0.75" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="(Canvas.Top)"
Duration="0:0:8">
<SplineDoubleKeyFrame Value="50" KeyTime="0:0:2"
KeySpline="0.25,0.75 0.75,0.25" />
<SplineDoubleKeyFrame Value="250" KeyTime="0:0:4"
KeySpline="0.75,0.25 0.25,0.75" />
<SplineDoubleKeyFrame Value="50" KeyTime="0:0:6"
KeySpline="0.25,0.75 0.75,0.25" />
<SplineDoubleKeyFrame Value="100" KeyTime="0:0:8"
KeySpline="0.75,0.25 0.25,0.75" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Canvas.Resources>
<Rectangle x:Name="MyRectangle" Width="300" Height="150"
Fill="Orange"
MouseLeftButtonDown="MyRectangle_MouseLeftButtonDown" />
</Canvas>
Oltre alle comuni proprietà KeyTime e Value, per ogni SplineDoubleKeyFrame dobbiamo indicare quali sono i due punti di controllo necessari alla rappresentazione della curva di Bézier, con la solita sintassi “x1,y1 x2,y2“. Dal precedente frammento di codice possiamo anche notare che, in XAML, proprietà particolari come Canvas.Left, quindi che hanno il punto nel nome, debbano essere definite fra parentesi tonde.
Il markup XAML da scrivere per generare animazioni articolate è molto verboso e complesso, realizzare grandi effetti applicati contemporaneamente a diversi elementi dell’interfaccia scrivendo tutto il codice dichiarativo a mano è impensabile.
Editor come Expression Blend rendono il lavoro molto più semplice e mantenibile. Con Blend possiamo registrare l’animazione in modo visuale spostando gli oggetti sulla scena e lavorando con la timeline. Una volta impostato tutto sarà il programma a generare tutto lo XAML necessario a riprodurre l’animazione in Silverlight.
Se vuoi aggiornamenti su Le spline inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
