Как я могу задержать анимацию раскадровки WPF на секунду, прежде чем продолжить?

У нас есть цветная анимация от красного до белого. В настоящее время это линейное затухание. Мы знаем, что можем играть с Storyboard BeginTime класса и тому подобное, но это просто задерживает начало всей анимации. Мы также рассмотрели аспекты "легкого входа / легкого выхода", но, похоже, они тоже не работают.

В частности, мы бы хотели удерживать значение красного в течение одной секунды, а затем постепенно переходить от красного к белому. Можно ли это сделать в чистом XAML? Если нет, то можно ли это сделать с помощью code-behind, вручную настраивая раскадровку? ... или мы должны использовать две отдельные раскадровки и воспроизводить их последовательно?

2 ответа

Решение

Несколько способов сделать это.

с ключевыми кадрами:

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

с двумя анимациями в последовательности:

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

с пользовательской функцией замедления:

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

В этом случае функция, которая показывает переход в первой половине продолжительности и содержит значение во второй половине. Поскольку EasingMode по умолчанию - EaseOut, эта функция будет "воспроизводиться" в обратном направлении.

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

В зависимости от того, как у вас написаны анимации, вы можете просто добавить переход "от красного" к "красному", который в начале занимает секунду. Технически анимация запущена, но ничего не происходит. Это можно сделать в чистом XAML.

Другие вопросы по тегам