Как я могу задержать анимацию раскадровки 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.