Silverlight动画介绍（一）

 

Silverlight 提供两大类动画类型，From/To/By动画和关键帧动画。下表说明这些动画类别级其命名约定。

类别	说明	命名约定
From/To/By动画	在起始值和结束值这间进行动画： 若要指定起始值，请设置动画的From属性。 若要指定结束值，请设置动画的To属性。 若要指定相对于超始值的结束值，请设置动画的By属性，而不是To属性。	Type Animation
关键帧动画	在使用关键帧对象指定的一系列值之间播放动画。关键帧动画的功能比From/To/By动画的功能更强大，因为您可以指定任意多个目标值，甚至可以控制它们的插值方法。	Type AnimationUsingKeyFrames

 

下表显示了一些常用动画类型以及与这些类型一起使用的一些属性

属性类型	对应的基本(From/To/By)动画	对应的关键帧动画	用法示例
Color	ColorAnimation	ColorAnimationUsingKeyFrames	对SolidColorBrush或GradientStop的Color进行动画处理.
Double	DoubleAnimation	DoubleAnimationUsingKeyFrames	对Rectangle的Width或Ellipse的Height（或任意FrameworkElement）进行动画处理。
Point	PointAnimation	PointAnimationUsingKeyFrames	对EllipseGeometry的Center位置进行动画处理
Object	无	ObjectAnimationUsingKeyFrames	对Fill属性进行动画处理，使其在不同的GradientBrush之间进行转换

 

动画是时间线

 

所有的动画均继承自Timeline对象，因此所有动画都是专用类型的时间线。Timeline定义时间段。您可以指定时间线的以下“计时行为”：其Duration和重复次数，甚至可以为时间线指它时间走得多快。

因为动画是Timeline，所以它还表示一个时间段。在动画的指定时间段（即Duration）内运行动画时，动画会计算输出值。在运行或“播放”动画时，动画将更新与其关联的属性。

 

Duration、AutoReverse和RepeatBehavior是三个常用计时属性。

 

Duration属性

 

时间线(以及继承自时间线的动画)表示一个时间段。该时间段的长度由时间线的Duration属性(通常用TimeSpan值指定)来决定。当时间表线达到其持续时间的终点时，表示时间线完成了一次重复。

 

动画使用其Duration属性来确定其当前值。如果没有为动画指定Duration值，它将使用默认(1秒)

下面的语法显示了Duration属性(Property)的XAML属性语法的简化版本。

小时：分钟：秒

 

AutoReverse属性

AutoReverse属性指定时间线在到达其Duration的终点后是否倒退。如果将此动画属性设置为true,则动画在到达其Duration的终点后将倒退，即从其终止值向其起始值反向播放。默认情况下，该属性为false。

 

RepeatBehavior属性

 

RepeatBehavior属性指定时间线的播放次数。默认情况下，时间线的重复次数为1.0，即播放一次时间线，不进行重复。

 

对属性应用动画

前面几节描述动画的不同类型及其计时属性。本节演示如何对要进行动画处理的属性应用动画。Storyboard 对象提供了对属性应用动画的一种方法。Storyboard 是一个为其所包含的动画提供目标信息的容器时间线。

 

Storyboard 类提供 TargetName 和 TargetProperty 附加属性。通过在动画上设置这些属性，您将告诉动画对哪些内容进行动画处理。不过，在动画以对象作为处理目标之前，必须使用 x:Name 属性为该对象提供一个名称（如上例所示），否则必须间接以属性作为目标。下面的示例演示如何间接以属性作为目标。

 

XAML:

<StackPanel x:Name="myStackPanel" Background="Red"

  Loaded="Start_Animation">

  <StackPanel.Resources>

    <Storyboard x:Name="colorStoryboard">

 

      <!-- Animate the background color of the canvas from red to green

        over 4 seconds. -->

      <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>

 

C#:

private void Start_Animation(object sender, EventArgs e)

{

    colorStoryboard.Begin();

}

 

 

这里介绍一下对变换进行动画处理

如旋转、扭曲和重新缩放对象）是通过对 Transform 对象的属性进行动画处理实现的。

下面的救命将StoryBoard和DoubleAnimation与RotateTransform一起使用，以便使Rectangle旋转到位。

XMAL:

<StackPanel Margin="15">

 <StackPanel.Resources>

    <Storyboard x:Name="myStoryboard">

      <DoubleAnimation

       Storyboard.TargetName="myTransform"

       Storyboard.TargetProperty="Angle"

       From="0" To="360" Duration="0:0:5"

       RepeatBehavior="Forever" />

    </Storyboard>

 </StackPanel.Resources>

 <Rectangle Width="50" Height="50" Fill="RoyalBlue"

   MouseLeftButtonDown="StartAnimation">

    <Rectangle.RenderTransform>

      <RotateTransform x:Name="myTransform" Angle="45" CenterX="25" CenterY="25" />

    </Rectangle.RenderTransform>

 </Rectangle>

</StackPanel>

 

C#:

private void StartAnimation(object sender, MouseEventArgs e)

{

    myStoryboard.Begin();

}

动画结束后会发生什么情况：

FillBehavior属性指定时间线结束时的行为方式。此属性的默认值为 HoldEnd，表示在动画结束后，进行动画处理的对象将保持其最终值。例如，如果对 Rectangle 的 Opacity 属性进行动画处理，使其在 2 秒内从 1 转换为 0，该矩形的默认行为是：在 2 秒后保持不透明度为 0 的状态。如果将 FillBehavior 设置为 Stop，该矩形的不透明度将在动画结束后还原为初始值 1。