XAML C# WPF Il modo migliore per eseguire una sequenza ordinata di animazioni

Question

Vorrei creare una sequenza di animazioni su un'etichetta, ad esempio, prima fare animazioni di opacità dai valori 0 a 1 e viceversa e solo alla fine di animazione di opacità e non prima di un'animazione in primo piano. Mi piacerebbe farlo nel codice XAML e quindi avviare e terminare l'animazione dal codice C#. Qual è il modo migliore ed efficace per farlo?

Tutte le risposte sono benvenute!

Grazie in anticipo.

Answer 1

Il modo più semplice è definire l'intera animazione in un singolo storyboard con le proprietà BeginTime e Duration appropriate. In questo modo l'intera animazione può essere avviata e interrotta come un'unità, ma è possibile avere sequenze diverse.

Ad esempio:

<Storyboard Duration="0:00:06"> 
    <DoubleAnimation Duration="0:0:4" Storyboard.TargetName="gear1RotateTransform" Storyboard.TargetProperty="Angle" From="-600" To="0"/> 
    <DoubleAnimation Duration="0:0:4" Storyboard.TargetName="gear2RotateTransform" Storyboard.TargetProperty="Angle" From="600" To="0"/> 
    <DoubleAnimation Duration="0:0:4" Storyboard.TargetName="gear3RotateTransform" Storyboard.TargetProperty="Angle" From="-600" To="0"/> 
    <DoubleAnimation BeginTime="0:0:1" Duration="0:00:02" Storyboard.TargetName="firstLetter" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0"/> 
    <DoubleAnimation BeginTime="0:0:2" Duration="0:00:02" Storyboard.TargetName="secondLetter" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0"/> 
    <DoubleAnimation BeginTime="0:0:3" Duration="0:00:02" Storyboard.TargetName="thirdLetter" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0"/> 
    <DoubleAnimation BeginTime="0:0:4" Duration="0:00:02" Storyboard.TargetName="siteLink" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0"/> 
    <DoubleAnimation BeginTime="0:0:4" Duration="0:00:02" Storyboard.TargetName="siteLinkTop" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0"/> 
</Storyboard> 

Questo storyboard modifica i valori sulla 3 rotazione trasforma per i primi 4 secondi, ma l'opacità sull'articolo firstLetter non inizia a cambiare finché dopo un secondo è passato e funziona solo per 2 secondi. Gli elementi siteLink e siteLinkTop non cambiano la loro opacità fino a dopo 4 secondi (e l'animazione della rotazione dell'ingranaggio è finita).