Windows Phone開發（41）：漫談主要畫面格動畫之下篇 轉：http://blog.csdn.net/tcjiaan/article/details/7573396

也許大家已經發現，其實不管什麼類型的動畫，使用方法基本是一樣的，不知道大家總結出規律了沒有？當你找到規律之後，你會發現真的可以舉一反六的，不騙你。

為了能協助大家找到規律，今天，我們再來寫兩個例子。

 

一、DiscreteObjectKeyFrame

簡單介紹一下這個吧，它只是為了方便我們進行一些大的切換而提供，但它也不是萬能的，儘管它的目標類型是object類型，前提是它與其它動畫一樣，只能針對某對象的某屬性進行動畫處理。與Flash相比，Silverlight是少了一些靈活性，但我們知道，畢竟Silverlight並不是真的為了做動畫而誕生的，微軟推出它的意義是用於企業級應用。而所謂的對多媒體支援或動畫之類，是為了提供更好的使用者體驗罷了，不要真把它當成娛樂專用哦。

好，F話就說到這裡，下面開始練習，首先你可以參照下面XAML程式碼完成前檯布局，隨便你寫在哪，反正你找到Grid控制項當容器就行了。練習嘛也是很靈活的，我從來不會對大家做死搬硬套的要求。

[html] view plaincopyprint?

1. <Grid>  
2.     <Rectangle x:Name="rec" Margin="100,200" Loaded="rec_Loaded"/>  
3.       
4.     <Grid.Resources>  
5.         <Storyboard x:Name="std">  
6.             <ObjectAnimationUsingKeyFrames  
7.                 Duration="0:0:8"  
8.                 Storyboard.TargetName="rec"  
9.                 Storyboard.TargetProperty="Fill"  
10.                 RepeatBehavior="Forever">  
11.                 <DiscreteObjectKeyFrame KeyTime="0:0:0">  
12.                     <DiscreteObjectKeyFrame.Value>  
13.                         <SolidColorBrush Color="Blue"/>  
14.                     </DiscreteObjectKeyFrame.Value>  
15.                 </DiscreteObjectKeyFrame>  
16.                 <DiscreteObjectKeyFrame KeyTime="0:0:3">  
17.                     <DiscreteObjectKeyFrame.Value>  
18.                         <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">  
19.                             <GradientStop Color="Red" Offset="0"/>  
20.                             <GradientStop Color="Yellow" Offset="0.5"/>  
21.                             <GradientStop Color="Purple" Offset="1"/>  
22.                         </LinearGradientBrush>  
23.                     </DiscreteObjectKeyFrame.Value>  
24.                 </DiscreteObjectKeyFrame>  
25.                 <DiscreteObjectKeyFrame KeyTime="0:0:5">  
26.                     <DiscreteObjectKeyFrame.Value>  
27.                         <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">  
28.                             <GradientStop Color="Snow" Offset="0"/>  
29.                             <GradientStop Color="Green" Offset="1"/>  
30.                         </RadialGradientBrush>  
31.                     </DiscreteObjectKeyFrame.Value>  
32.                 </DiscreteObjectKeyFrame>  
33.             </ObjectAnimationUsingKeyFrames>  
34.         </Storyboard>  
35.     </Grid.Resources>  
36. </Grid>  

上面代碼中，我們定義了一個rec_Loaded事件處理常式，目的是啟動動畫，所以，在上面代碼中的rec_Loaded處單擊右鍵，從彈出的菜單中選擇“導航到事件處理常式”，這樣就產生了一個事件處理方法rec_Loaded了，接著我們在這裡開始播放動畫。

[csharp] view plaincopyprint?

1. private void rec_Loaded(object sender, RoutedEventArgs e)  
2. {  
3.     this.std.Begin();  
4. }  

 

現在請你調試運行，觀賞一下效果吧。

 

 

 

二、LinearPointKeyFrame

這個東西大家一定熟悉，就是對兩個點之間進行動畫，前面的例子有，但這是主要畫面格動畫，也就是說可以在N個點間產生動畫，使用XAML時，它是PointAnimationUsingKeyFrames的子項目。

請參考下面的XAML代碼構建UI介面。

[html] view plaincopyprint?

1. <Grid>  
2.     <Ellipse x:Name="ell" Width="400" Height="400" Loaded="ell_Loaded">  
3.         <Ellipse.Fill>  
4.             <RadialGradientBrush Center="0,0.5" RadiusX="1" RadiusY="0.5">  
5.                 <GradientStop Color="Gold" Offset="0"/>  
6.                 <GradientStop Color="Red" Offset="1"/>  
7.             </RadialGradientBrush>  
8.         </Ellipse.Fill>  
9.     </Ellipse>  
10.     <Grid.Resources>  
11.         <Storyboard x:Name="std">  
12.             <PointAnimationUsingKeyFrames  
13.                     Duration="0:0:12"  
14.                     Storyboard.TargetName="ell"  
15.                     Storyboard.TargetProperty="(Ellipse.Fill).(RadialGradientBrush.Center)"  
16.                     RepeatBehavior="Forever">  
17.                 <LinearPointKeyFrame KeyTime="0:0:3" Value="0.5,1"/>  
18.                 <LinearPointKeyFrame KeyTime="0:0:6" Value="1,0.5"/>  
19.                 <LinearPointKeyFrame KeyTime="0:0:9" Value="0.5,0"/>  
20.                 <LinearPointKeyFrame KeyTime="0:0:12" Value="0,0.5"/>  
21.             </PointAnimationUsingKeyFrames>  
22.         </Storyboard>  
23.     </Grid.Resources>  
24. </Grid>  

不要忘了啟動動畫。

[csharp] view plaincopyprint?

1. private void ell_Loaded(object sender, RoutedEventArgs e)  
2. {  
3.     std.Begin();  
4. }  

好，看看效果如何。

 

 

不知道大家通過練習，感覺如何，如果你WPF基礎很紮實的話，我相信這些例子你根本不用看都懂了，當然，如果你是初學者，也不要被這些東西嚇，如果你真想學習，哪怕理論上的東西你搞不懂（其實，理論的東西沒幾個人真的會懂的）也不要緊，關鍵是多動手，多練習。還是那句話，你會穿衣服就行了，沒有人說非得要懂得怎麼做衣服後才能穿衣服的。是不是這個道理呢？如果你不理解農民伯伯是怎麼把菜種出來的，難道你不吃菜了不成？