动画效果

第一个：矩形框颜色渐变 线性：

<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,动画主要就这些了～