如何为WPF中的图像内容制作动画？ [英] How do I animate image content in WPF?

问题描述

我有一个非常基本的用户控件，带有一个带有图像的按钮。我想通过将按钮的图像更改为其他图像来对其进行动画处理。

I have a really basic user control with a button that has an image. I want to animate the image of the button, by changing it to a different image.

<UserControl.Resources>
    <Image x:Key="GlyphDefault" Source="pack://application:,,,/X;component/images/Glyphs_Default.png" Height="8" Width="8" />
    <Image x:Key="GlyphClicked" Source="pack://application:,,,/X;component/images/Glyphs_Click.png" Height="8" Width="8"  />

</UserControl.Resources>
    <Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup Name="MouseStates">
            <VisualState Name="MouseHover" >
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="GlyphButton"
                                Storyboard.TargetProperty="Content"
                                Duration="0:0:1" >
                        <ObjectAnimationUsingKeyFrames.KeyFrames>
                            <DiscreteObjectKeyFrame KeyTime="0:0:1">
                                <DiscreteObjectKeyFrame.Value="{StaticResource GlyphClicked}" />
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames.KeyFrames>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState Name="MouseNotHover" >
            </VisualState>
        </VisualStateGroup>

    </VisualStateManager.VisualStateGroups>
    <Button x:Name="GlyphButton" 
            MouseLeave="GlyphButton_MouseLeave"
            MouseEnter="GlyphButton_MouseEnter"
            Content="{StaticResource GlyphDefault}"
            />
</Grid>

不幸的是，当我运行此命令时，然后将鼠标悬停在该按钮上，得到无法冻结Freezable异常（Mouse事件处理程序更改状态）。看来它正在尝试冻结当前图像，但是由于某些原因而无法。

Unfortunately, when I run this, and hover over the button I get "Freezable cannot be frozen" exception (the Mouse event handlers change the states). It appears that it's trying to freeze the current image, but can't for some reason.

我尝试不使用静态资源（只是放置图像）内联），但相同的错误。奇怪的是，我很少在Content属性上找到有关制作动画的文档或博客。我不得不想象这将是一种常见的情况。关于我在做什么错的任何想法吗？

I've tried doing it without using a static resource (just putting the Image inline) too, but same error. Oddly, I can find very little documentation or blogs about doing animations on the Content property. I'd have to imagine this would be a common scenario. Any ideas as to what I'm doing wrong?

非常感谢您对此提供的帮助！

I greatly appreciate your help on this!

推荐答案

这可能不是实现此目的的最佳（或最简单）方法。 Content 属性绝对不是WPF设计师想到的动画。我将改用以下方法：

This is probably not the best (or easiest) way to go about this. The Content property is definitely not what the WPF designers had in mind for animations. Here is how I would do this instead:

1. 将 Button.Content 设置为成为 Grid ，将两个图像都放置在里面（因此彼此重叠）。


2. 设置您希望最初在图片上看到的 Image 上的不透明度


3. 使用 DoubleAnimation 对 Opacity 进行动画处理 ObjectAnimation -您可以通过将一个人的不透明度降低到0.0动画，同时将另一个人的不透明度提高到1.0来切换图像。此外，根据持续时间的不同，这将为您提供一个不错的淡入淡出过渡。

1. Set the Button.Content to be a Grid with both of the images placed inside (thus, overlaying each other).
2. Set the Opacity on the Image you want to be initially visible to 1.0 and 0.0 on the Image to be initially hidden.
3. Animate the Opacity using a DoubleAnimation rather than an ObjectAnimation- you can switch the images by animating one's opacity down to 0.0 while simultaneously bringing the other one up to 1.0. Furthermore, depending on the duration, this will gave you a nice fading transition.

这篇关于如何为WPF中的图像内容制作动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！