在WPF中實現動畫,對象必須滿足三個條件:
1. 必須有一個依賴屬性(Dependency Property)。
2. 必須繼承DependencyObject對象,並實現了IAnimatable接口。常用的控件Button,Panel和Shape都繼承DependencyObject,並實現了IAnimatable接口,因此這不是一個問題。
3. 必須有一個兼容的動畫類型變量。
實現動畫的第一步是選擇一個屬性來動畫。在范例中,我們通過改變Button的角度來實現動畫。Angel屬性值是Double類型,因此我們使用DoubleAnimation創建從開始值到終點值的漸變。同時,還需要指定Duration屬性值,也就是從開始到結束所持續的時間。Duration值越大,動畫就會越慢。
第二步是創建Storyboard,在Storyboard中放置DoubleAnimation元素。DoubleAnimation通過Storyboard.TargetName屬性指定在哪裡應用動畫,也就是指定動畫的對象。本范例指定Button按鈕應用動畫。
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="AnimatedRotateTransform"
Storyboard.TargetProperty="Angle"
To="360" Duration="0:0:5" FillBehavior="Stop" />
</Storyboard>
</BeginStoryboard>
最後一步是關聯Storyboard和Trigger,也就是指定啟動動畫的事件。
<EventTrigger RoutedEvent="Button.Click">
完整的范例代碼如下:
<Page XMLns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
XMLns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title=" Welcome to EntLib.com | Graphics: Animated Rotation"
Background="White" Margin="50">
<StackPanel>
<Button Content="Slow Spinning Button" Width="200" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="AnimatedRotateTransform"
Storyboard.TargetProperty="Angle"
To="360" Duration="0:0:5" FillBehavior="Stop" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Page>
演示效果如下: