WPF中动态创建动画（一）

最近开始研究WPF，WPF是微软在.NET3.0中新加进的功能，一同被加进来的还有WCF、WF，这三个新的特性使得.NET变得更加丰富。

 

关于WPF，个人比较推荐的入门书籍是Charles Petzold 的《Windows Presentation Foundation程序设计指南》一书，又名：Application = Code + Markup，正如书名所言，这本书从C#代码开始讲起，直到最后引入xaml，对于习惯了C#语言的开发者来说是一种很好的入门方式。

 

由于我个人比较喜欢使用C#而非标记语言，所以一般情况下我都会使用C#代码来实现。

 

好了，废话不多说了，步入正题。

 

我先介绍第一种在WPF中创建动画的方法，也是官方MSDN推荐的方法，即使用Storyboard创建动画。

首先在VS2010中新建一个WPF Application（VS2008也可以，不过VS2005默认情况下是没有WPF的模板的，建议都用VS2010吧，个人感觉比前几个版本都要好用），默认将创建两个xaml文件，一个是App.xaml，这个是程序的入口所在，还有一个是自动生成的默认程序界面MainWindow.xaml。

进入MainWindow.xaml的xaml编辑界面中，将其代码写成这样：

 

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Width="800" Height="600">

                MouseLeftButtonDown="Carrier_MouseLeftButtonDown">
   

 

可以看出，我们再这个MainWindow里添加了一个Canvas Carrier，设置其背景为银色（Silver），并为它添加了一个鼠标左键点击的事件

 

接下来，我们进入MainWindow.xaml.cs文件中，添加如下所示的代码：

Rectangle rect;//创建一个方块进行演示 public MainWindow() { InitializeComponent(); //对方块进行初始化 rect = new Rectangle(); rect.Fill = new SolidColorBrush(Colors.Red); rect.Width = 50; rect.Height = 50; rect.RadiusX = 5; rect.RadiusY = 5; Carrier.Children.Add(rect); Canvas.SetLeft(rect, 0); Canvas.SetTop(rect, 0); } private void Carrier_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { Point p = e.GetPosition(Carrier); Storyboard storyboard = new Storyboard();//新建一个动画板 //添加X轴方向的动画 DoubleAnimation doubleAnimation = new DoubleAnimation( Canvas.GetLeft(rect), p.X, new Duration(TimeSpan.FromMilliseconds(500))); Storyboard.SetTarget(doubleAnimation, rect); Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Left)")); storyboard.Children.Add(doubleAnimation); //添加Y轴方向的动画 doubleAnimation = new DoubleAnimation( Canvas.GetTop(rect), p.Y, new Duration(TimeSpan.FromMilliseconds(500))); Storyboard.SetTarget(doubleAnimation, rect); Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Top)")); storyboard.Children.Add(doubleAnimation); if (!Resources.Contains("rectAnimation")) { Resources.Add("rectAnimation", storyboard); } storyboard.Begin();//开始运行动画 }

 

从上面代码我们看到，在鼠标点击了Canvas之后，我们先获取鼠标点击相对于其的坐标位置p，然后创建storyboard以及动画doubleAnimation，doubleAnimation有三个参数，分别为：开始值、结束值、动画时间。接着通过Storyboard.SetTarget()和Storyboard.SetTargetProperty()这两个静态函数设置动画的目标和动画发生时修改的目标属性。然后将动画加进storyboard中，重复两次，分别实现X轴和Y轴方向上的动画。最后将storyboard加入Resources中以使程序能够识别。一切OK后，调用storyboard.Begin()来开始动画。

 

按下Ctrl+F5，看看运行效果吧，试着用鼠标在窗口上随便点点，怎么样，是不是看到了方块在运动？

 

 

小结：Storyboard动画是基于时间线的一帧一帧的矢量动画，原理是通过实时的修改动画对象的某一或多个属性来产生一帧一帧的动画。

 

OK，今天的介绍就到这里，下次继续介绍第二种创建动画的方法。