概述

在正文开始之后，先介绍一下Storyboard, 其定义如下: Controls animations with a timeline, and provides object and property targeTing information for its child animations. 因为它用时间线（timeline）来控制，并提供了要绑定的对象和目标属性信息。

在正文开始之后，先介绍一下Storyboard,其定义如下:
Controls animations with a timeline,and provides object and property targeTing
information for its child animations.

因为它用时间线（timeline）来控制，并提供了要绑定的对象和目标属性信息。其在XAML中的
格式如下：

< Storyboard

使用silverlight中的Storyboard实现动画效果

>
oneOrMoreChildTimelines
</ Storyboard >

    其中的oneOrMoreChildTimelines可以是如下任一或多个对象元素：

    Storyboard,ColorAnimation,ColorAnimationUsingKeyFrames,DoubleAnimation,
    DoubleAnimationUsingKeyFrames,PointAnimation,PointAnimationUsingKeyFrames

    下面就其中几个主要的元素作如下演示说明，首先请看“DoubleAnimation”：

    DoubleAnimation：当动画值的变化（FROM ...TO...）类型是 Double型时使用。

    下面演示的就是矩形（MyAnimatedRectangle）的“Opacity”（透明度）属性在一秒内从1到0
的动画（参数说明见注释）。

< StackPanel >
        < StackPanel.resources >
       
            < Storyboard x:Name ="myStoryboard" >
                < DoubleAnimation
                   Storyboard.TargetName ="MyAnimatedRectangle"
            Storyboard.TargetProperty ="Opacity"
            From ="1.0"
            To ="0.0"
            Duration ="0:0:1"
            AutoReverse ="True"
            repeatBehavior ="Forever" />
            </ Storyboard >
        </ StackPanel.resources >
        

        < Rectangle @H_637_19@mouSELEftButtonDown ="Mouse_Clicked"
   x:Name ="MyAnimatedRectangle"
   Width ="100" Height ="100" Fill ="Blue" />
</ StackPanel >

    ColorAnimation：当动画值的变化（FROM ...TO...）类型是 Color型时使用。

    下面演示的是myStackPanel背景色在4秒内从红到绿的动画。

< StackPanel x:Name ="myStackPanel" BACkground ="Red" Grid.Row ="0"
        Loaded ="Start_Animation" >
     < TextBlock Foreground ="White" > 使用层级方式绑定TargetProperty： </ TextBlock >
     < StackPanel.resources >
         < Storyboard x:Name ="colorStoryboard" >
             < ColorAnimation BeginTime ="00:00:00" Storyboard.TargetName ="myStackPanel"
        Storyboard.TargetProperty ="(Panel.BACkground).(SolidColorBrush.Color)"
        From ="Red" To ="Green" Duration ="0:0:4" />
         </ Storyboard >
     </ StackPanel.resources >
</ StackPanel >

    下面XAML代码与上面所示的实现效果相同：

< StackPanel Loaded ="Start_Animation" >
      < TextBlock Foreground ="White" > 普通方式绑定TargetProperty： </ TextBlock >
      < StackPanel.resources >
          < Storyboard x:Name ="colorStoryboard2" >
              < ColorAnimation BeginTime ="00:00:00" Storyboard.TargetName ="mySolidColorBrush"
    Storyboard.TargetProperty ="Color" From ="AliceBlue" To ="Green" Duration ="0:0:4" FillBehavior ="Stop" />
          </ Storyboard >
      </ StackPanel.resources >
      < StackPanel.BACkground >
          < SolidColorBrush x:Name ="mySolidColorBrush" Color ="AliceBlue" />
      </ StackPanel.BACkground >
</ StackPanel >

    接下来是PointAnimation: 当动画值的变化（FROM ...TO...）类型是 Point型时使用。

    下面的XAML演示的是EllipseGeometry对象从point(20,200)移动到point(400,100)的动画。

< PointAnimation Storyboard.TargetProperty ="Center"
  Storyboard.TargetName ="MyAnimatedEllipseGeometry"
  Duration ="0:0:5"
  From ="20,200"
  To ="400,100"
  repeatBehavior ="Forever" />

        </ Storyboard >
    </ Canvas.resources >
< Path Fill ="Blue" >
        < Path.Data >
            
            < EllipseGeometry x:Name ="MyAnimatedEllipseGeometry"
  Center ="20,20" radiusX ="15" radiusY ="15" />
        </ Path.Data >
</ Path >