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(); };   
}

现在，你运行一下，保证比上面的精彩，管你信不信，反正你运行一下就会信了。