XAML per Silverlight - Seconda parte

L'animazione vera e propria si definisce con gli oggetti BeginStoryboard, Storyboard ed infine con uno o più oggetti DoubleAnimation, ColorAnimation e PointAnimation, infatti nel singolo codice di una animazione è possibile gestire l'animazione di più proprietà:

<Canvas Width="100" Height="100" x:Name="Animations"> 
    <TextBlock FontSize="100" FontWeight="Bold" FontStyle="Italic"  
FontFamily="Verdana" x:Name="TextBlock1"> 
        <TextBlock.Triggers> 
            <EventTrigger  
RoutedEvent=" TextBlock.Loaded"> 
                 
<BeginStoryboard> 
                     
<Storyboard Name="TextBlock1Gradient" Storyboard.TargetName="TextBlock1"> 
                         
<PointAnimation AutoReverse="True" To="0.99,0.5" Duration="0:0:5" BeginTime="0:0:6"   
Storyboard.TargetProperty="(TextBlock.Foreground).(LinearGradientBrush.StartPoint)"/> 
                         
<PointAnimation To="1,0.5" Duration="0:0:5" Storyboard.TargetProperty="(TextBlock.Foreground).(LinearGradientBrush.EndPoint)"/> 
                         
<ColorAnimation From="#FF000000" To="Green" Duration="0:0:3" BeginTime="0:0:3" Storyboard.TargetProperty="(TextBlock.Foreground).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"/> 
                     
</Storyboard> 
                 
</BeginStoryboard> 
                 
<BeginStoryboard> 
                     
<Storyboard Name="TextBlock1Top" Storyboard.TargetName="TextBlock1" Storyboard.TargetProperty="(Canvas.Top)"> 
                         
<DoubleAnimation By="100" Duration="0:0:5" BeginTime="0:0:1"/> 
                     
</Storyboard> 
                 
</BeginStoryboard> 
            </EventTrigger> 
        </TextBlock.Triggers> 
        <TextBlock.Foreground> 
            <LinearGradientBrush  
EndPoint="0,0.5" StartPoint="0,0.5"> 
                 
<GradientStop Color="#FF000000" Offset="0"/> 
                 
<GradientStop Color="#FFFF0606" Offset="1"/> 
            </LinearGradientBrush> 
        </TextBlock.Foreground> 
    <Run Text="Silverlight"/> 
    </TextBlock> 
</Canvas> 

In questo esempio al testo dell'oggetto TextBlock1 è applicato un gradiente lineare come effetto di riempimento, nello Storyboard TextBlock1Gradient le posizioni del punto di inizio e del punto di fine del gradiente vengono spostate progressivamente da sinistra a destra, attraverso Storyboard.TargetName viene impostato l'oggetto delle animazioni, nei due PointAnimation con la proprietà Storyboard.TargetProperty  è stata impostata la proprietà da modificare, in questo caso, trattandosi di una proprietà di un oggetto associato ad un riempimento, questo è stato possibile attraverso la sintassi: "(TextBlock.Foreground).(LinearGradientBrush.StartPoint)" , racchiudendo tra parentesi la coppia oggetto.proprietà ed usando la notazione punto per scendere al livello desiderato in maniera simile a percorrere i nodi XML del codice.

Con BeginTime è possibile impostare il momento in cui deve iniziare l'animazione rispetto alla generazione dell'evento impostato nell'EventTrigger, con Duration è possibile regolarne la durata con un valore temporale espresso nella forma [days.]hours:minutes:seconds[.fractionalSeconds] , i dati tra parentesi sono facoltativi, con un 0:0:1 si imposta un tempo pari ad un secondo. Usando la proprietà SpeedRatio è possibile velocizzare o rallentare l'animazione rispetto alla sua durata.

Con le proprietà From si imposta il valore dal quale deve partire l'animazione e con To il valore che deve raggiungere, con By si imposta un valore che deve essere sommato al valore originale della proprietà o a quello impostato con From.

La proprietà From può essere omessa per generare una animazione che inizi dallo stato in cui si trovi l'oggetto, qualunque esso sia. Nelle animazioni di rollover /rollout del mouse questa possibilità si rivela molto utile per realizzare con incredibile semplicità l'effetto giusto di rollout che, in caso di uscita del mouse dall'oggetto prima che l'animazione di rollover sia terminata, non porti in un istante l'oggetto al completo stato di rollover, creando un indesiderabile sfarfallio.

Con AutoReverse e RepeatBehavior è possibile gestire il comportamento dell'animazione fuori dalla durata impostata, con l'impostazione a True di AutoReverse al termine della durata l'animazione viene eseguita al contrario fino allo stato iniziale dell'oggetto, con RepeatBehavior è possibile decidere quante volte ripetere l'animazione attraverso un moltiplicatore  2x, 3x, ecc.., durante un arco di tempo oppure Forever cioè un numero di volte indefinito.

Contemporaneamente il primo colore viene cambiato da nero a verde ed il testo viene spostato in basso di 100 pixel. Questo è possibile inserendo un altro Storyboard  ed il corrispondente BeginStoryboard, per una corretta gestione è consigliabile raggruppare in un unico Storyboard  più animazioni ma riconducibili ad un singolo evento dell'utente o del sito.

Attenzione: Questo articolo contiene un allegato

Sullo stesso argomento

Commenti

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Segnala su: