Windows Phone開發（37）：動畫之ColorAnimation

上一節中我們討論了用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(); };        }

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