XAML 实例演示之八 –动画:缓慢旋转的按钮
XAML 系列文章为学习笔记,这是我今年春节期间安排的学习任务。
前面系列文章:
本文介绍了如何实现动画。范例程序简单实现了一个慢慢旋转的按钮。
在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>
演示效果如下: