Windows Phone開發（36）：動畫之DoubleAnimation 轉：http://blog.csdn.net/tcjiaan/article/details/7521388

從本節開始，我們將圍繞一個有趣的話題展開討論——動畫。

看到動畫一詞，你一定想到Flash，畢竟WP應用的一個很重要的架構是Silverlight，在WP中也發揮了Silverlight的許多優點，可能不少人說，Silverlight就是和Flash差不多吧，當你深入瞭解了Silverlight後，你會發現，其實不然，Silverlight更偏重於資料處和企業級應用。

 

好了，F話不多說，開始吹我們今天的牛皮吧，在吹牛皮之前，我們更應該知道牛皮是從哪裡來的。故在說動畫之前，先想一下，什麼是Storyboard？這個東東你覺得怎麼翻譯好呢，叫示範圖板吧，MSDN是這樣翻譯的，我說一個直觀一點的概念吧，不知道各位玩過Flash沒，Flash裡面有一個“幀面板”，是的，其實這個示範圖板和幀面板有著很嚴重的相似之處。

這樣吧，我們還是接受一下.NET非常強大的事實吧，所以，開啟Express Blend來看看一個圖形化的示範圖板，這樣一來，大家一定會更好理解。

 

這樣一看，一定很形象了，Storyboard從TimeLine派生而來，時間軸在動畫裡面是比較關鍵的，我們都知道，所謂動畫會“動”，正是因為它存在一個時間差，“幀”的概念相信大家能理解，只可意會不可言傳啊，看你跟她能有多少默契了。

 

一個Storyboard可以包含N多個子動畫時間軸，今天我們先來瞭解一個比較簡單的，DoubleAnimation是在一定時間段內對兩個double值進行動畫處理，如可視化元素的寬度，高度，透明度等。

 

嚴重警告：不是所有的屬性都能夠進行動畫處理的，要進行動畫處理的屬性必須是依賴項屬性。

 

好了，理論說多了，很容易讓人走火入魔，還是動手幹一下好吧。

下面我們來做一個演練。

 

第一步，建立一個WP應用程式項目，此處省略35個字。

第二步，在頁面中添加一個矩形，兩個按鈕，矩形是“小白鼠”，是用來給我們做動畫實驗的，至於那兩個按鈕，一個是播放動畫，一個是停止動畫。介面怎麼布置，隨你喜歡。

[html] view plaincopyprint?

1. <!--ContentPanel - 在此處放置其他內容-->  
2. <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">  
3.     <Grid.RowDefinitions>  
4.         <RowDefinition Height="*"/>  
5.         <RowDefinition Height="auto"/>  
6.     </Grid.RowDefinitions>  
7.     <Rectangle x:Name="rec"  
8.                Grid.Row="0"  
9.                Margin="100"  
10.                Fill="Yellow"/>  
11.     <StackPanel Grid.Row="1" Orientation="Horizontal">  
12.         <Button Content="播放" Click="play_Click"/>  
13.         <Button Content="停止" Click="stop_Click"/>  
14.     </StackPanel>  
15. </Grid>  

 

第三步，在上面那個叫ContentPanel的Grid中加一個Storyboard，作為資源，並在其中聲明一個DoubleAnimation，把矩形的透明度在5秒鐘內變為0，即使矩形產生淡出的動畫效果。

Storyboard.TargetName附加屬性指定要進行動畫處理的對象的名字，你想幹掉誰，就寫上它的名字吧；Storyboard.TargetProperty是要動畫處理的屬性，由於我們要對透明度進行動畫過度，故這裡用Opacity屬性。Duration就是動畫的時間長度，這裡取5秒鐘。

[html] view plaincopyprint?

1. <Grid.Resources>  
2.     <Storyboard x:Name="std">  
3.         <DoubleAnimation  
4.             Duration="0:0:5"  
5.             Storyboard.TargetName="rec"  
6.             Storyboard.TargetProperty="Opacity"  
7.             To="0"/>  
8.     </Storyboard>  
9. </Grid.Resources>  

第四步，分別處理兩個按鈕的單擊事件，調用Storyboard的Begin和Stop方法來控制項動畫的播放和停止。

[csharp] view plaincopyprint?

1. private void play_Click(object sender, RoutedEventArgs e)  
2. {  
3.     this.std.Begin();  
4. }  
5.   
6. private void stop_Click(object sender, RoutedEventArgs e)  
7. {  
8.     this.std.Stop();  
9. }  

 

好，現在運行一下看看。

 

 

 

 

不夠爽嗎？再做一個吧，把一個橢圓的寬度在3秒鐘內從20變為420，如何。

看XAML代碼。

[html] view plaincopyprint?

1. <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">  
2.     <Grid.RowDefinitions>  
3.         <RowDefinition />  
4.         <RowDefinition Height="Auto" />  
5.     </Grid.RowDefinitions>  
6.     <Ellipse Grid.Row="0" Height="325" Name="ell"  Width="15" Fill="DarkOrange" />  
7.     <StackPanel Grid.Row="1" Orientation="Horizontal">  
8.         <Button Content="播放" Click="onPlay"/>  
9.         <Button Content="停止" Click="onStop"/>  
10.     </StackPanel>  
11.       
12.     <Grid.Resources>  
13.         <Storyboard x:Name="std">  
14.             <DoubleAnimation Duration="0:0:3"  
15.                              Storyboard.TargetName="ell"  
16.                              Storyboard.TargetProperty="Width"  
17.                              From="20"  
18.                              To="420"/>  
19.         </Storyboard>  
20.     </Grid.Resources>  
21. </Grid>  

 

後台代碼：

 

[csharp] view plaincopyprint?

1. private void onPlay(object sender, RoutedEventArgs e)  
2. {  
3.     this.std.Begin();  
4. }  
5.   
6. private void onStop(object sender, RoutedEventArgs e)  
7. {  
8.     this.std.Stop();  
9. }  

 

 看看運行效果。