¿Cómo puedo mantener una animación de storyboard WPF por un segundo, antes de continuar?

animation timing

Question

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 demora el inicio de toda la animación. También hemos analizado el lado de la facilidad de entrada / salida, pero tampoco parecen funcionar.

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?

Answer 1

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.

Answer 2

Varias maneras de hacer esto.

con marcos 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();
    }
}