EntLib.com 专业电子商务平台

基于Microsoft .Net Framework / ASP.Net / C# / AJAX 平台构建的标准电子商务系统
随笔 - 99, 评论 - 69, 引用 - 0

XAML 实例演示之八 –动画:缓慢旋转的按钮

XAML 实例演示之八 –动画:缓慢旋转的按钮
 
本文配合免费下载的Kaxaml 工具,演示XAML 的一些基本用法。关于Kaxaml 工具的介绍和下载,请参考文章:推荐一款免费下载 XAML 编辑调试工具-Kaxaml
 
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>
 
演示效果如下:
 

 

 打印 | 发表评论 | posted on 2009年1月26日 8:42 | 目录 [ WPF ]

评 论

欢迎发表评论。

发表评论

标题  
姓名  
Email
主页
评论内容   
Please add 3 and 5 and type the answer here: