¿Cómo puedo mantener una animación de guion gráfico WPF por un segundo, antes de continuar?

Tenemos una animación en color que combina de rojo a blanco. Actualmente, esto es un fundido lineal. Sabemos que podemos jugar con el BeginTime de la clase Storyboard y demás, pero eso simplemente retrasa el inicio de toda la animación. También hemos analizado el lado de la facilidad de entrada/salida, pero tampoco parecen funcionar.¿Cómo puedo mantener una animación de guion gráfico WPF por un segundo, antes de continuar?

Específicamente, nos gustaría mantener el valor de rojo durante un segundo y luego pasar de rojo a blanco en el siguiente. ¿Se puede hacer eso en XAML puro? Si no, ¿se puede hacer en código subyacente al configurar manualmente un guión gráfico? ... o tenemos que usar dos storyboards separados y reproducirlos en secuencia?

Fuente

2012-05-17 MarqueIV

Varias formas de hacerlo.

con fotogramas clave:

<Storyboard> 
    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Background.Color"> 
     <DiscreteColorKeyFrame Value="Red" KeyTime="0:0:0" /> 
     <DiscreteColorKeyFrame Value="Red" KeyTime="0:0:1" /> 
     <LinearColorKeyFrame Value="White" KeyTime="0:0:2" /> 
    </ColorAnimationUsingKeyFrames> 
</Storyboard>

con dos animaciones en secuencia:

<Storyboard> 
    <ColorAnimation Storyboard.TargetProperty="Background.Color" 
        From="Red" To="Red" Duration="0:0:1" /> 
    <ColorAnimation Storyboard.TargetProperty="Background.Color" 
        To="White" BeginTime="0:0:1" Duration="0:0:1" /> 
</Storyboard>

con una función de aceleración personalizada:

<Storyboard> 
    <ColorAnimation Storyboard.TargetProperty="Background.Color" 
        From="Red" To="White" Duration="0:0:2"> 
     <ColorAnimation.EasingFunction> 
      <local:CustomEasingFunction /> 
     </ColorAnimation.EasingFunction> 
    </ColorAnimation> 
</Storyboard>

En este caso, una función que muestra la transición en la primera mitad de duración y mantiene el valor en la segunda mitad. Debido a que el EasingMode predeterminado es EaseOut, esta función se 'reproducirá' hacia atrás.

public class CustomEasingFunction : EasingFunctionBase 
{ 
    public CustomEasingFunction() : base() 
    { } 

    protected override double EaseInCore(double normalizedTime) 
    { 
     return (normalizedTime < 0.5) 
      ? normalizedTime * 2 
      : 1; 
    } 

    protected override Freezable CreateInstanceCore() 
    { 
     return new CustomEasingFunction(); 
    } 
}

Fuente

2012-05-18 00:30:45 LPL

Muy completo y exactamente lo que necesitaba. Este es un gran S.O. Responda también, ya que sé que otros estarán contentos con el nivel de detalle que ha brindado. ¡Muchas gracias! – MarqueIV

Sin embargo, una pregunta ... ¿está seguro de su comentario en el ejemplo de la Función Easing? Según MSDN, el tiempo normalizado va de 0 a 1, no de 1 a 0 como usted indicó, así el valor de retorno debería ser 0 para valores menores que 0.5 (la primera mitad de la duración), luego be '(tiempo normalizado * 2) - 1 '(que es lo mismo que' (tiempo normalizado - 0.5) * 2 ') para la segunda mitad, ¿correcto? Lo obtuve desde aquí ... http://msdn.microsoft.com/en-us/library/system.windows.media.animation.easingfunctionbase.easeincore.aspx – MarqueIV

Aaah! Descubrí por qué pensaste que iba de 1 a 0. Tienes EasingMode configurado en el valor predeterminado que es EaseOut, que establece que los valores devueltos por 'Ease' deben ser 100% de interpolación menos el resultado de la función EaseInCore, por lo tanto pensando que pasó de 1 a 0. Un doble negativo si se quiere. Sin embargo, debido a que la función se llama EaseInCore, para consistencia probablemente debería escribirse con el tiempo yendo de 0 a 1, entonces EasingMode tendría que establecerse explícitamente en EaseIn, pero de nuevo, eso sería más claro ya que la función representaría el tiempo transcurrido correctamente. – MarqueIV

Dependiendo de cómo haya escrito sus animaciones, puede agregar una transición "de" Rojo "a" Rojo que demora un segundo al principio ". Entonces, técnicamente, la animación se está ejecutando, pero no está haciendo nada. Eso se puede hacer en XAML puro.

Fuente

2012-05-17 20:57:30 Tim

¿Cómo puedo mantener una animación de guion gráfico WPF por un segundo, antes de continuar?

Respuesta

Cuestiones relacionadas