原文:Windows Phone開發(fā)（37）：動畫之ColorAnimation

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

其實，它和DoubleAnimation也是很像，畢竟所謂動畫，無非就是在特定的時間段內(nèi)，把一個值變?yōu)榱硪粋€值的一種過度形式。故ColorAnimation就是用于顏色過度動畫的。其中，以下幾個屬性我們只需簡單關(guān)注一下即可：

?

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

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

?

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

?

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

?

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

現(xiàn)在我們可以開始干活了，來，跟著伴奏音樂，一起唱……

?

First，新建一個WP應(yīng)用程序項目。

?

Second，這一步，沒什么的，把以下的XAML代碼干完，注意理解，不是叫你打字練習(xí)啊。

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

使用RepeatBehavior="Forever"是為了能讓動畫不斷循環(huán)播放，如果你希望重復(fù)3次就設(shè)置為3了，Forever就是永久重復(fù)。

?

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

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

?

現(xiàn)在，你運行應(yīng)用程序，你會看到很精彩的東西，比《西施秘史》還要精彩。

?

?

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

?

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

<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"><ColorAnimationDuration="0:0:2"Storyboard.TargetName="g1"Storyboard.TargetProperty="Color"From="LightBlue" To="Green"RepeatBehavior="Forever"/><ColorAnimationDuration="0:0:3"Storyboard.TargetName="g2"Storyboard.TargetProperty="Color"From="Orange" To="Snow"RepeatBehavior="Forever"/><ColorAnimationDuration="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(); };}

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

?

?

總結(jié)

以上是生活随笔為你收集整理的Windows Phone开发（37）：动画之ColorAnimation的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。