WPF使用Storyboard做個帶旋轉特效的關閉按鈕

見過迅雷7右邊廣告的關閉按鈕，滑鼠移上去的話有個旋轉90度的效果，感覺挺酷的，於是用WPF也實現了一下。很簡單，定義幾行XAML就搞定了。WPF做這種效果還是很好使的~~

用SL封裝了個效果：

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