如何反转 WPF 故事板动画？答案

【问题标题】：How to Reverse WPF Storyboard animation?如何反转 WPF 故事板动画？
【发布时间】：2013-09-11 14:05:22
【问题描述】：

我在 Expression Blend 4 中的图像上创建了 WPF Storyboard 动画。悬停时，图像逐渐模糊。当鼠标离开图像时，有什么办法可以撤消或反转情节提要？我可以让它触发 Storyboard.Remove() 但这实际上并不会在 Storyboard 中向后播放。

有什么方法可以在 Expression Blend 4 中实现吗？

【问题讨论】：

我不使用 Expression Blend，但也许您想直接在 xaml 上工作？要通过另一个事件反转情节提要，最简单的方法是创建一个新情节提要以相反的顺序执行动画并将其标记到该事件
我正在考虑这样做，但我试图避免创建另一个故事板。感谢您的意见。
到目前为止，如果“do-and-reverse”由单个事件触发，则可以轻松完成，但对于您的情况，它是 2 个单独的事件。将有兴趣了解仅通过 xaml 的便捷方式。

标签： c# wpf animation expression-blend

【解决方案1】：

由于您使用的是 Blend，您应该利用 Blend 对VisualStateManager 的支持。您所要做的就是描述对象在其各种状态下的样子，例如MouseOver 和Normal 以及各种状态之间的转换时间，视觉状态管理器会计算出如何在状态之间转换。

图像没有任何视觉状态，但您可以编辑Button 模板并使其内容成为图像，然后编辑按钮的状态。我已经完成了这项工作并清理了 XAML 以演示该技术：

<Grid>
    <Grid.Resources>
        <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Image x:Name="image" Height="100" Width="Auto" Source="http://thecybershadow.net/misc/stackoverflow.png" Margin="0,0,-25,0">
                            <Image.Effect>
                                <DropShadowEffect ShadowDepth="0"/>
                            </Image.Effect>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.5"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="image">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="15"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed"/>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Image>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>
    <Button Style="{StaticResource ButtonStyle1}"/>
</Grid>

请注意，Blend 会为您完成所有这些工作，但了解 XAML 会有所帮助。这是一个面向混合的教程：

MORE ARTICLES ON VISUAL STATE MANAGER

【讨论】：

感谢您的帮助。制作成 Button 有点令人沮丧，但只要它功能正常，我就可以处理它。谢谢！
您可以在我的示例中看到如何“样式化”所有按钮：没有镶边、没有边框、没有多余的鼠标悬停行为等。但是如果您阅读我发送的链接，它将向您展示如何为任何类型的元素创建自己的状态组和状态，例如 MouseOver 和 Normal。所以，不，它不是或看起来不像一个按钮。
这不是“如何反转 WPF 故事板动画？”的答案。 -.-'

【解决方案2】：

也许解决方案就在这个答案上：

How to animate ListBox Items on MouseEnter and MouseLeave events using C#/WPF?

【讨论】：

在他的问题下，他确实评论说他想避免创建另一个故事板