现在的位置: 首页 > 综合 > 正文

WPF使用Storyboard做个带旋转特效的关闭按钮

2012年06月12日 ⁄ 综合 ⁄ 共 1269字 ⁄ 字号 评论关闭

见过迅雷7右边广告的关闭按钮,鼠标移上去的话有个旋转90度的效果,感觉挺酷的,于是用WPF也实现了一下。很简单,定义几行XAML就搞定了。WPF做这种效果还是很好使的~~

用SL封装了个效果:

获取 Microsoft Silverlight

 <Image Width="20" Height="20" Source="image\close.png" 
                     ToolTip
="关闭"
                   Opacity
="0.5" Canvas.Left="720" Canvas.Top="3" 
                   MouseLeftButtonDown
="Close_MouseLeftButtonDown">
                <Image.RenderTransform>
                    <RotateTransform x:Name="imgTransform"
                                     CenterX
="10"
                                     CenterY
="10"
                                     Angle
="0"/>
                </Image.RenderTransform>
                <Image.Triggers>
                    <EventTrigger RoutedEvent="Image.MouseEnter">
                        <BeginStoryboard   HandoffBehavior="Compose"  >
                            <Storyboard >
                                <DoubleAnimation
                    
Storyboard.TargetName="imgTransform"
                        Storyboard.TargetProperty
="Angle" 
                        By
="90" Duration="0:0:.2" 
                        
/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Image>

 

其中给图片定义个旋转的变化,然后给鼠标进入事件添加一个触发器。当鼠标进入的时候触发器触发故事板在0.2秒时间内使图片以中心为圆点旋转90度。SO EASY!!

 

抱歉!评论已关闭.