wpf - 如何让 WPF Storyboard动画停留一秒钟，然后再继续？

Question

我们有一个从红色混合到白色的彩色动画。目前，这是线性淡入淡出。我们知道我们可以使用 Storyboard 类的 BeginTime 等，但这只会延迟整个动画的开始。我们还研究了缓入/缓出方面的问题，但它们似乎也不起作用。

具体来说，我们希望将红色值保持一秒钟，然后在下一秒钟从红色渐变为白色。这可以在纯 XAML 中完成吗？如果没有，可以在代码隐藏中手动设置 Storyboard来完成吗？ ...或者我们是否必须使用两个单独的 Storyboard并按顺序播放它们？

Answer 1

有几种方法可以做到这一点。

带有关键帧:

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