如何在继续之前将 WPF 故事板动画保持一秒钟？答案

【问题标题】：How can I hold a WPF storyboard animation for a second, before continuing?如何在继续之前将 WPF 故事板动画保持一秒钟？
【发布时间】：2012-05-17 20:20:05
【问题描述】：

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

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

【问题讨论】：

标签： wpf animation storyboard timing

【解决方案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();
    }
}

【讨论】：

非常彻底，正是我所需要的。这是一个很棒的 S.O.也回答，因为我知道其他人会对您提供的详细程度感到满意。非常感谢！
一个问题...您确定您在缓动函数示例中的评论吗？根据 MSDN，标准化时间从 0 到 1，而不是您所说的从 1 到 0，因此对于小于 0.5（持续时间的前半部分）的值，返回值应为 0，然后为 '(normalizedTime * 2) - 1'（与 '(normalizedTime - 0.5) * 2' 相同）用于下半场，对吗？我从这里得到的...msdn.microsoft.com/en-us/library/…
啊啊！我弄清楚了为什么它从 1 变为 0。您将 EasingMode 设置为默认值，即 EaseOut，这表明从“Ease”返回的值应该是 100% 插值减去 EaseInCore 函数的结果，因此您认为它从 1 变为 0。如果你愿意的话，一个双重否定。然而，因为该函数被称为 EaseInCore，为了保持一致性，它可能应该用从 0 到 1 的时间来编写，然后 EasingMode 必须显式设置为 EaseIn，但同样，这会更清楚，因为函数将表示经过的时间正确。
感谢您的澄清。当我开始创作时，我已经想知道这一点。再次感谢。
没有问题。这就是这个网站的用途。我们互相帮助！ ......就像你将如何通过投票支持我的评论来帮助我，对吧？ [傻笑]

【解决方案2】：

根据您编写动画的方式，您可以在开头添加一个“从”红色“到”红色的过渡，该过渡需要一秒钟。所以从技术上讲，动画正在运行，但它什么也没做。这可以在纯 XAML 中完成。

【讨论】：