wpf图片动画的问题

Question

打个比方就如同QQ的最小化按钮那样  鼠标移动上去和移出的效果
这应该是两张图  举例来说正常是A图  鼠标移动上去B图渐入  鼠标移出B图渐出
这个图片的渐入渐出怎么实现呢？我现在的代码上面的关闭按钮的样式
 <!--关闭按钮样式-->
    <Style x:Key="closeBtnStyle" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">                    <Image Name="closeBtn" Source="/images/sysbtn_close_normal.png"  Height="29" />
                    
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Source" Value="/images/sysbtn_close_hover.png" TargetName="closeBtn" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Source" Value="/images/sysbtn_close_down.png" TargetName="closeBtn" />                        </Trigger>
                     
                        
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
这样只能让图片一下就显示出来  而不能想QQ那样渐渐的出来  是不是需要用动画？动画颜色我会  但是这个图片怎么弄呢  我还是wpf入门阶段 这个还请各位大大帮一下哈wpf 动画移动鼠标图片

Answer 1

<Style x:Key="closeBtnStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <Image Name="btnImg" Source="/images/sysbtn_close_normal.png" Height="29" />
                    <Image Name="hoverImg" Source="/images/sysbtn_close_hover.png" Height="29" Opacity="0" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="btnImg" Property="Source" Value="/images/sysbtn_close_down.png" />
                        <Setter TargetName="hoverImg" Property="Visibility" Value="Hidden" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="hoverImg" Storyboard.TargetProperty="Opacity"
                                                        To="1" Duration="0:0:.5" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="hoverImg" Storyboard.TargetProperty="Opacity"
                                                        To="0" Duration="0:0:0.2" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 2

确实好使！但是鸡蛋里挑个骨头啊 鼠标移出之后也确实是渐出效果了 但是效果完毕之后的图片的透明度使这个图片变浅了啊  不是程序一开始加载上去的那个图片的效果  这个是怎么回事呢 我看代码也只是更改hoverImg的透明度 但是为何鼠标移出之后hoverImg的透明度应该变成0而看不到 显现的应该是btnImg 而这个btnImg是没有更改其透明度的  怎么会变浅了呢

Answer 3

    <Window.Resources>
        <Storyboard x:Key="loginStoryboard">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid">
                <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="grid">
                <SplinePointKeyFrame KeyTime="0" Value="0.5,0.5"/>
                <SplinePointKeyFrame KeyTime="0:0:1" Value="0.5,0.5"/>
            </PointAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" 
                                           Storyboard.TargetName="grid">
                <SplineDoubleKeyFrame KeyTime="0" Value="-1"/>
                <SplineDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Button   Grid.Column="1" Grid.ColumnSpan="2" Height="28"   Width="95"  HorizontalAlignment="Left"  Template="{DynamicResource dlButtonTemplate}"  IsDefault="True"   Name="btnLogin" Click="btnLogin_Click">                        </Button>
                        <Button   Grid.Column="3" Grid.ColumnSpan="2" Height="28"   Width="95"  HorizontalAlignment="Left"  Template="{DynamicResource qxButtonTemplate}" IsCancel="True"   Name="btnCancel" Click="btnCancel_Click">                        </Button>
                    </Grid>

Answer 4

4L的大大 我是wpf刚入门的 你贴的这个我真心看不懂啊  哈哈 勿怪

Answer 5

自己写一个测试的Demo跑起来看看就明白了

Answer 6

第三张怎么是空白的？
哪张是normal，哪张是down啊？
图片有透明色吗？

Answer 7

第三张不是空白你可以另存为看一下  他是一个背景透明的叉叉  第三张是normal  第一张是down 第二张是hover

Answer 8

嗯 确实是的  我看到你这上面的鼠标移出和移入是一样的颜色的 但是我这里的normal 程序刚打开却很白 
可能是我程序上面的原因吧