XAML C# WPF La mejor manera eficiente de hacer una secuencia ordenada de animaciones

Question

Me gustaría hacer una secuencia de animaciones en una etiqueta, por ejemplo, primero hacer animaciones de opacidad de los valores 0 a 1 y viceversa y justo al final de animación de opacidad y no antes de una animación en primer plano. Me gustaría hacerlo en código XAML y luego comenzar y finalizar la animación desde el código C#. ¿Cuál es la mejor y más eficiente forma de hacerlo?

¡Todas las respuestas son bienvenidas!

Gracias de antemano.

Answer 1

La manera más fácil es definir toda la animación en un solo guión gráfico con las propiedades adecuadas BeginTime y Duration. De esta forma, toda la animación puede iniciarse y detenerse como una unidad, pero puede tener diferentes secuencias.

Por ejemplo:

<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> 

Este guión gráfico cambia los valores en el 3 giran transforma durante los primeros 4 segundos, pero la opacidad en el artículo firstLetter no comienza a cambiar hasta después de pasado un segundo y solo funciona por 2 segundos. Los elementos siteLink y siteLinkTop no tienen su opacidad modificada hasta después de 4 segundos (y la animación de rotación del engranaje ha finalizado).