上一節中我們討論了用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代碼干完，注意理解，不是叫你打字練習啊。

<Grid>   
    <Rectangle Margin="80,150">   
        <Rectangle.Fill>   
            <SolidColorBrush x:Name="sb" Color="Green"/>   
        </Rectangle.Fill>   
    </Rectangle>   
    <Grid.Resources>   
        <Storyboard x:Name="std">   
            <ColorAnimation   
                Duration="0:0:1"   
                Storyboard.TargetName="sb"   
                Storyboard.TargetProperty="Color"   
                From="Red"   
                To="Blue"   
                RepeatBehavior="Forever"/>   
        </Storyboard>   
    </Grid.Resources>   
</Grid>   

使用RepeatBehavior="Forever"是為了能讓動畫不斷循環播放，如果你希望重復3次就設置為3了，Forever就是***重復。

別忘了在后臺代碼中啟動動畫。

public MainPage()   
{   
    InitializeComponent();   
    this.Loaded += (sender, e) => { std.Begin(); };   
}   

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

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

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

<Grid>   
    <Ellipse HorizontalAlignment="Center"   
             VerticalAlignment="Center"   
             Width="400" Height="400">   
        <Ellipse.Fill>   
            <RadialGradientBrush Center="0.5,0.5"   
                                 RadiusX="0.5"   
                                 RadiusY="0.5">   
                <GradientStop x:Name="g1" Color="Yellow" Offset="0"/>   
                <GradientStop x:Name="g2" Color="Green" Offset="0.5"/>   
                <GradientStop x:Name="g3" Color="Red" Offset="1"/>   
            </RadialGradientBrush>   
        </Ellipse.Fill>   
    </Ellipse>   
    <Grid.Resources>   
        <Storyboard x:Name="std">   
            <ColorAnimation   
                Duration="0:0:2"   
                Storyboard.TargetName="g1"   
                Storyboard.TargetProperty="Color"   
                From="LightBlue" To="Green"   
                RepeatBehavior="Forever"/>   
            <ColorAnimation   
                Duration="0:0:3"   
                Storyboard.TargetName="g2"   
                Storyboard.TargetProperty="Color"   
                From="Orange" To="Snow"   
                RepeatBehavior="Forever"/>   
            <ColorAnimation   
                Duration="0:0:1"   
                Storyboard.TargetName="g3"   
                Storyboard.TargetProperty="Color"   
                From="Yellow" To="Red"   
                RepeatBehavior="Forever"/>   
        </Storyboard>   
    </Grid.Resources>   
</Grid>   

后臺代碼還是不能忘，不然就啟動不了動畫了。

public Page1()   
{   
    InitializeComponent();   
    this.Loaded += (sender, e) => { std.Begin(); };   
}   

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