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編輯界面中，將其代碼寫成這樣：

 

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

    <Canvas x:Name="Carrier" Width="800" Height="600" Background="Silver"
            MouseLeftButtonDown="Carrier_MouseLeftButtonDown">
    </Canvas>

</Window>

 

可以看出，我們再這個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，今天的介紹就到這裏，下次繼續介紹第二種創建動畫的方法。