CSDN 论坛

xzybl08-28 02:15

等级 14次回复

wpf图片动画的问题

打个比方就如同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入门阶段 这个还请各位大大帮一下哈

jshi12308-28 06:42

等级 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>

0 0

xzybl08-28 13:10

等级 2楼

引用 1 楼 jshi123 的回复:

<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>

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

0 0

jshi12308-28 13:16

等级 3楼

你把你的三张图片贴出来看下。

0 0

rui_china08-28 13:27

等级 4楼

    <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>

0 0

xzybl08-28 14:30

等级 5楼

就是这三张

0 0

xzybl08-28 14:30

等级 6楼

引用 4 楼 rui_china 的回复:

    <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>

感谢回复 我研究一下哈

0 0

xzybl08-28 15:04

等级 7楼

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

0 0

rui_china08-28 15:40

等级 8楼

引用 7 楼 xzybl 的回复:

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

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

0 0

jshi12308-28 15:41

等级 9楼

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

0 0

xzybl08-28 16:26

等级 10楼

引用 9 楼 jshi123 的回复:

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

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

0 0

jshi12308-28 17:32

等级 11楼

我这里试了很正常，你看是这样吗：

0 0

xzybl08-28 17:48

等级 12楼

引用 11 楼 jshi123 的回复:

我这里试了很正常，你看是这样吗：

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


可能是我程序上面的原因吧  

0 0

xzybl08-28 17:49

等级 13楼

上面第一张是程序刚打开  旁边的最小化按钮也是很白  第二张是鼠标移出之后的  可以看出他和最小化按钮上面的白 有色差了  呵呵  可能是我程序上的问题吧  

0 0

xzybl08-28 17:57

等级 14楼

OK搞定！！！我程序上的原因！

0 0