第一个：矩形框颜色渐变 线性：
代码
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="SilverlightApplication1.MainPage"
Width="640" Height="480" mc:Ignorable="d">
<UserControl.Resources>
<Storyboard x:Name="StoryBoard1" >
<DoubleAnimation
Storyboard.TargetName="MyAnimateRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever">
</DoubleAnimation>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Rectangle x:Name="MyAnimateRectangle" Fill="#FFEB5252" Stroke="Black" Margin="42,163,0,234" MouseLeftButtonDown="MyAnimateRectangle_MouseLeftButtonDown" HorizontalAlignment="Left" Width="201" />
</Grid>
</UserControl>
后台cs代码：
代码
代码
private void MyAnimateRectangle_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
// TODO: Add event handler implementation here.
StoryBoard1.Begin();
}
AutoReverse：表示为自动倒置，如果这里为True，则会自动按照原来的返回，就会是从 1 到 0 再到1 的过程，如果不设置，或者为False则是：从 1 到 0 直接到1 再到零 的过程
RepeatBehavior：可以采用文本 Forever 和迭代语法 iterationsx。此迭代语法使用一个整数来指定动画应重复的次数，该整数后面紧跟一个小写的原义字符 x（区分大小写）。比如： RepeatBehavior="5x" 表示执行5次后停止，若设置 3 秒的 RepeatBehavior，则为 RepeatBehavior=“0:0:3”,如果将 数字设置为整数默认代表天数；
第二个：矩形框颜色渐变 非线性
代码
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="SilverlightApplication1.MainPage"
Width="640" Height="480" mc:Ignorable="d">
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Margin="0,29,47,0" Height="100" VerticalAlignment="Top" MouseLeftButtonDown="StackPanel_MouseLeftButtonDown" HorizontalAlignment="Right" Width="237" >
<StackPanel.Resources>
<Storyboard x:Name="myStoryBoard">
<ColorAnimation Storyboard.TargetName="mySolidColorBrush" Storyboard.TargetProperty="Color"
From="Red" To="Green" Duration="0:0:4"
RepeatBehavior="Forever"
></ColorAnimation>
</Storyboard>
</StackPanel.Resources>
<StackPanel.Background>
<SolidColorBrush x:Name="mySolidColorBrush" Color="Red"></SolidColorBrush>
</StackPanel.Background>
</StackPanel>
</Grid>
</UserControl>
后台cs代码：
代码
private void MyAnimateRectangle_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
// TODO: Add event handler implementation here.
StoryBoard1.Begin();
}
这里将 <StackPanel.Resources> 写在 StackPanel内部，这样这个资源之在本StackPanel内部有效（有效域的问题）
<StackPanel.Background> 下，使用SolidColorBrush 来绘制背景色，
第三个：运动的球 可：开始，暂停，继续，停止；
代码
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="SilverlightApplication1.MainPage"
Width="640" Height="480" mc:Ignorable="d">
<UserControl.Resources>
<Storyboard x:Name="StoryBoardBall">
<PointAnimation Storyboard.TargetName="Ball"
Storyboard.TargetProperty="Center"
Duration="0:0:5"
From="96,0"
To="96,800"
RepeatBehavior="Forever" />
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Path Fill="Blue">
<Path.Data>
<EllipseGeometry x:Name="Ball" Center="20,20" RadiusX="50" RadiusY="50"></EllipseGeometry>
</Path.Data>
</Path>
<Button x:Name="button1" Height="36" HorizontalAlignment="Left" Margin="84,0,0,34" VerticalAlignment="Bottom" Width="99" Content="Begin" Click="button1_Click"/>
<Button x:Name="button2" Height="36" HorizontalAlignment="Left" Margin="227,0,0,34" VerticalAlignment="Bottom" Width="85" Content="Pause" Click="button2_Click"/>
<Button x:Name="button3" Height="36" HorizontalAlignment="Right" Margin="0,0,194,34" VerticalAlignment="Bottom" Width="85" Content="Resume" Click="button3_Click"/>
<Button x:Name="button4" Height="36" HorizontalAlignment="Right" Margin="0,0,32,34" VerticalAlignment="Bottom" Width="111" Content="Stop" Click="button4_Click"/>
</Grid>
</UserControl>
后台cs代码：
代码
private void button1_Click(object sender, System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
StoryBoardBall.Begin();
}
private void button2_Click(object sender, System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
StoryBoardBall.Pause();
}
private void button3_Click(object sender, System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
StoryBoardBall.Resume();
}
private void button4_Click(object sender, System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
StoryBoardBall.Stop();
}
在Path下，使用EllipseGeometry 绘制一个椭圆，椭圆的两个半径为： RadiusX 和 RadiusY
Center表示 该椭圆默认所在的位置
KeySpline:首先需要了解三次方贝塞尔曲线。一条三次方贝塞尔曲线由一个起点、一个终点和两个控制点来定义。KeySpline 中的两个坐标定义了这两个控制点。在描述关键样条时，贝塞尔曲线的起点始终为 0，终点始终为 1，这也就是只定义两个控制点的原因。得到的曲线指定了如何在一个时间段内内插动画；也就是说，该曲线表示动画的目标属性在该时间段内的变化速度。
OK,动画主要就这些了～
