Windows Phone開發（37）：動畫之ColorAnimation 轉：http://blog.csdn.net/tcjiaan/article/details/7526026

上一節中我們討論了用double值進行動畫處理，我們知道動畫是有很多種的，今天，我向大家繼續介紹一個動畫類——ColorAnimation。

其實，它和DoubleAnimation也是很像，畢竟所謂動畫，無非就是在特定的時間段內，把一個值變為另一個值的一種過度形式。故ColorAnimation就是用於顏色過度動畫的。其中，以下幾個屬性我們只需簡單關注一下即可：

 

1、By：相對於初始值所更改的值的總量。這個屬性比較不好理解，所以我把它放到第一位，說實話，這種用顏色表示的值確實不好理解。我們不妨用DoubleAnimation的By屬性來理解它，原理是一樣的。舉個例子，如果一個按鈕的寬度Width的值為200，現在我對它進行動畫處理，我把By設定為150，那麼，你猜一下，動畫的最終值是多少?不用猜，計算一下，既然By表示的是變化的總量，也就是 200 + 150 ＝ ？，這結果不用我告訴你了吧，小學生層級的，你應該會計算的。

好的，再舉一個例子如何，比如A類的某依賴項屬性X的初始值為300，現在多要對它進行動畫處理，我將By設定為-100，動畫最終的值 ＝ 300 - 100，這個會算了吧。

 

2、From：這個好理解 了，就是動畫開始時的值，比如，我希望動畫效果是，矩形的背景從紅色變成藍色，那麼，From的值是不是Red啊？估計不用我給你答案了，你懂的。

 

3、To：與From相對，就是動畫結束時的值，像上面的例子，從紅色變成藍色，也就是說，From = Red，To = Blue  。

 

好了，上面的內容大概瞭解一下可以了，千萬不要背下來啊，編程是不能背書的，實在不記得了就查文檔，查資料， 不能背。不要被磚家誤導了。

現在我們可以開始幹活了，來，跟著伴奏音樂，一起唱……

 

First，建立一個WP應用程式項目。

 

Second，這一步，沒什麼的，把以下的XAML代碼幹完，注意理解，不是叫你打字練習啊。

[html] view plaincopyprint?

1. <Grid>  
2.     <Rectangle Margin="80,150">  
3.         <Rectangle.Fill>  
4.             <SolidColorBrush x:Name="sb" Color="Green"/>  
5.         </Rectangle.Fill>  
6.     </Rectangle>  
7.     <Grid.Resources>  
8.         <Storyboard x:Name="std">  
9.             <ColorAnimation  
10.                 Duration="0:0:1"  
11.                 Storyboard.TargetName="sb"  
12.                 Storyboard.TargetProperty="Color"  
13.                 From="Red"  
14.                 To="Blue"  
15.                 RepeatBehavior="Forever"/>  
16.         </Storyboard>  
17.     </Grid.Resources>  
18. </Grid>  

使用RepeatBehavior="Forever"是為了能讓動畫不斷迴圈播放，如果你希望重複3次就設定為3了，Forever就是永久重複。

 

別忘了在後台代碼中啟動動畫。

[csharp] view plaincopyprint?

1. public MainPage()  
2. {  
3.     InitializeComponent();  
4.     this.Loaded += (sender, e) => { std.Begin(); };  
5. }  

 

現在，你運行應用程式，你會看到很精彩的東西，比《西施秘史》還要精彩。

 

 

按照我的習慣，一個例子是不夠的，想不想來一個更爽的？如果你想，就繼續；如果你不想，請拔掉電腦電源。

 

接下來我們做一個對漸層畫填充進行顏色動畫處理，上面的例子，只是針對單色畫刷，下面我們幹漸層的。

[html] view plaincopyprint?

1. <Grid>  
2.     <Ellipse HorizontalAlignment="Center"  
3.              VerticalAlignment="Center"  
4.              Width="400" Height="400">  
5.         <Ellipse.Fill>  
6.             <RadialGradientBrush Center="0.5,0.5"  
7.                                  RadiusX="0.5"  
8.                                  RadiusY="0.5">  
9.                 <GradientStop x:Name="g1" Color="Yellow" Offset="0"/>  
10.                 <GradientStop x:Name="g2" Color="Green" Offset="0.5"/>  
11.                 <GradientStop x:Name="g3" Color="Red" Offset="1"/>  
12.             </RadialGradientBrush>  
13.         </Ellipse.Fill>  
14.     </Ellipse>  
15.     <Grid.Resources>  
16.         <Storyboard x:Name="std">  
17.             <ColorAnimation  
18.                 Duration="0:0:2"  
19.                 Storyboard.TargetName="g1"  
20.                 Storyboard.TargetProperty="Color"  
21.                 From="LightBlue" To="Green"  
22.                 RepeatBehavior="Forever"/>  
23.             <ColorAnimation  
24.                 Duration="0:0:3"  
25.                 Storyboard.TargetName="g2"  
26.                 Storyboard.TargetProperty="Color"  
27.                 From="Orange" To="Snow"  
28.                 RepeatBehavior="Forever"/>  
29.             <ColorAnimation  
30.                 Duration="0:0:1"  
31.                 Storyboard.TargetName="g3"  
32.                 Storyboard.TargetProperty="Color"  
33.                 From="Yellow" To="Red"  
34.                 RepeatBehavior="Forever"/>  
35.         </Storyboard>  
36.     </Grid.Resources>  
37. </Grid>  

後台代碼還是不能忘，不然就啟動不了動畫了。

[csharp] view plaincopyprint?

1. public Page1()  
2. {  
3.     InitializeComponent();  
4.     this.Loaded += (sender, e) => { std.Begin(); };  
5. }  

現在，你運行一下，保證比上面的精彩，管你信不信，反正你運行一下就會信了。