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.
38 / 59

Line e Polyline

I Video di HTML.it

AngularJS & Cloud Resources

Grazie alle potenzialità del framework JavaScript di Google possiamo integrare al meglio risorse cloud in una Single Page Application: scopriamo […]