如何反转WPF Storyboard动画？

Question

我在Expression Blend 4中创建了一个WPF Storyboard动画，它可以使图像逐渐模糊。当鼠标离开图像时，有没有办法让Storyboard被撤销或反向播放？我可以使用Storyboard.Remove()来触发，但那样并不能实现倒放。

在Expression Blend 4中有没有办法实现这个效果？

- Kevin Mark

---

我不使用Expression Blend，但也许你想直接在XAML上工作？要通过另一个事件反转Storyboard，最简单的方法是创建一个新的Storyboard，按相反的顺序进行动画，并将其标记到该事件。 - C_Rance

我曾考虑过这样做，但我试图避免创建另一个故事板。感谢您的建议。 - Kevin Mark

到目前为止，如果“do-and-reverse”由单个事件触发，那么可以很容易地完成，但对于您的情况，它是两个单独的事件。有兴趣知道是否有通过仅使用XAML的便捷方式。 - C_Rance

Answer 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将有所帮助。以下是一个针对Blend的教程：

• 更多关于可视状态管理器的文章

- Rick Sladkey

---

谢谢你的帮助。将其制作成按钮有点烦人，但只要它能正常运行，我就可以处理它。谢谢！ - Kevin Mark

在我的示例中，您可以看到如何“样式化”所有按钮：没有Chrome，没有边框，没有多余的鼠标悬停行为等。但是，如果您阅读我发送的链接，它将向您展示如何为任何类型的元素创建自己的状态组和状态，例如MouseOver和Normal。因此，不，它不必是或看起来像一个按钮。 - Rick Sladkey

这不是“如何反转WPF故事板动画”的答案。-.-' - Martin Schneider

Answer 2

也许这个答案可以解决你的问题：

如何使用C#/WPF在MouseEnter和MouseLeave事件中为ListBox项添加动画效果？

- Tony

---

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