动画

Silverlight 允许你使用标记来定义动画。本 QuickStart 介绍 Silverlight 动画特性并带你走入创建你的第一个 Silverlight 动画的过程。

本 QuickStart 包含以下章节。

演练：让一个对象活起来

步骤 1：找一些东西作动画
步骤 2：创建一个 EventTrigger
步骤 3：创建一个 Storyboard 和一个动画

其它类型的动画
Timelines 属性
设定动画转换值
下一步是什么

演练：让一个对象活起来

步骤 1：找一些东西作动画

首先，你需要一些东西来作动画。在本示例中你将使用一个 Ellipse。下面的示例创建了一个 Ellipse 和初始化喷涂其为黑色。

[隐藏 XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Ellipse x:Name="ellipse"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
      Fill="black" />
</Canvas>

[隐藏] [重新开始]

注意 ellipse 有一个名字

x:Name="ellipse"

ellipse 需要一个名字以产生动画。（更详细地说，一个 ellipse 需要一个名称以便它可以被 XAML 中任意地方定义的 animation 使用。现在你有一个对象可供产生动画，下一步是创建一个 EventTrigger 来开始动画。

步骤 2：创建一个 EventTrigger

一个 EventTrigger 当一些东西触发它时执行一个动作。如其名字一样，“一些东西”是一个事件，由 RoutedEvent 属性标识。因为你想让 EventTrigger 开始一个动画，所以使用一个 BeginStoryboard 作为它的动作。

你也需要决定哪一个事件将触发动画。在 Silverlight 1.0 中，可选的值很简单，因为 EventTrigger 对象只支持一个事件， Loaded 事件。设置 RoutedEvent 属性到 Canvas.Loaded。当主 Canvas 读取时将开始一个动画，下面的示例展示了标记这些内容。

[隐藏 XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          
          <!-- Insert Storyboard here. -->
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  
  <Ellipse x:Name="ellipse"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
      Fill="black"/>
</Canvas>

[隐藏] [重新开始]

现在你已经创建了一个 Storyboard 和一个动画。

步骤 3：创建一个 Storyboard 和一个动画

一个 Storyboard 可以描述和控制一个或多个动画。本示例，我们将使用一个单一的动画。在 Silverlight 中，通过设置动画到对象的属性让对象活动起来。使用一个 DoubleAnimation 使 Ellipse 的 Canvas.Left 属性活动起来。你使用 DoubleAnimation 是由于该属性是动态的， Canvas.Left，是类型为 Double 的属性（一个双精度浮点数）。

要操作动画，你必须给它一个目标名称（Storyboard.TargetName="ellipse"）、一个目录属性（Storyboard.TargetProperty="(Canvas.Left)"）、一个用于动画的值（To="300"）和一个 Duration（Duration="0:0:1"）。 Duration 属性指定了动画从开始时间到结束时间转换的时间长度。 0:0:1 的值指定一个 Duration 是一秒钟。

（你可能需要在 QuickStart 的动画中单击“restart”，由于你在查看本页的前一个示例时它可能已经运行了一次，按照它的 Duration 和 RepeatBehavior 设置，本动画将不会再运行直到你通过重新读取来重启代码。）

[隐藏 XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation 
              Storyboard.TargetName="ellipse"
              Storyboard.TargetProperty="(Canvas.Left)"
              To="300" Duration="0:0:1" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  <Ellipse x:Name="ellipse"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"
      Fill="black"/>
</Canvas>

[隐藏] [重新开始]

你使用 DoubleAnimation 作动画， Canvas.Left，类型是 Double （一个 Double 是一个双精度浮点数）。

恭喜！你刚刚创建你的第一个 Silverlight 动画。如果你想学习更多的 Silverlight 动画系统，请继续阅读。

其它类型的动画

Silverlight 也提供了动态颜色（ColorAnimation）和点（PointAnimation）。当你在使用动态颜色时，记住颜色和 SolidColorBrush 的不同；起作用的是是后者的属性。当你标识一个颜色名字或 16 进制值到一个形状的 Stroke 和 Fill 属性， Silverlight 将该字符串转换成一个 SolidColorBrush。要让形状的 Stroke 或 Fill 活动起来，你需要设置 SolidColorBrush 的 Color 属性让其活动起来，通常情况下，当你想要让一个带笔刷的属性活动起来时，一个好的主意是声明一个笔刷比声明一个颜色或 16 进制值使用更繁琐的句法，以便你可以给它命名。

下面的示例让两个椭圆的颜色动起来。第一个椭圆的 Fill 显式地使用了 SolidColorBrush。示例给出了 SolidColorBrush 的名称和动画 Color 属性。第二个动画要复杂一些，因为第二个椭圆的 Fill 使用的是颜色名称。当标记运行时，系统创建了一个拥有一定颜色的 SolidColorBrush 并使用它来给椭圆喷涂。由于这里没有 <SolidColorBrush> 标签被命名，系统产生的 SolidColorBrush 只能通过间接的属性目标来产生动画。

[隐藏 XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <ColorAnimation 
               Storyboard.TargetName="e1_brush"
               Storyboard.TargetProperty="Color"
               From="Red" To="Blue" Duration="0:0:5" />
            <ColorAnimation 
               Storyboard.TargetName="e2"
               Storyboard.TargetProperty="(Fill).(Color)"
               From="Red" To="Blue" Duration="0:0:5" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  
  <Ellipse 
      Height="100" Width="100" Canvas.Left="30" Canvas.Top="30">
    <Ellipse.Fill>
      <SolidColorBrush x:Name="e1_brush" Color="black"/>
    </Ellipse.Fill>
  </Ellipse>
  
  <Ellipse x:Name="e2" Fill="Black"
      Height="100" Width="100" Canvas.Left="30" Canvas.Top="130"/>
</Canvas>

[隐藏] [重新开始]

Timelines 属性

Storyboard 和 DoubleAnimation 都是 Timeline 对象类型。 Timelines 有一些有用的属性：

Storyboard.TargetName：要产生动画的对象的名称。如果你没有标识 Storyboard.TargetName，时间线使用其父时间线的 Storyboard.TargetName。如果你没有为它的任何父时间线标识 Storyboard.TargetName，时间线和EventTrigger 启动的元素关联。
Storyboard.TargetProperty：你要产生动画的属性。如果你没有标识 Storyboard.TargetProperty，时间线使用其父时间线的 Storyboard.TargetProperty。该属性变量的语句取决于动画属性的类型。
- 关联到附加的属性，按照下面的语法： "(ownerType.propertyName)"。比如，"(Canvas.Top)" 关联到 Canvas.Top 属性。
- 关联到其它任意类型的属性，使用下面的语法："propertyName"。比如，"Opacity" 关联到 Opacity 属性。
BeginTime：标明时间线何时开始的时间。注意你在这里的语法，由于默认的度量单位是“天”（简单地设置该属性为“2”结果是一个 2 天的 BeginTime！）使用下面的语法标识小时、分和秒：hours:minutes:seconds。比如，"0:0:2" 设定一个 2 秒钟（0 小时，0 分，2 秒）的 BeginTime。如果你没有标识 BeginTime，属性的默认值是 0 秒。
Duration：时间线播放一次的时间长度。对一个动画来说，这是动画从开始到结尾的播放时间长度。 Duration 属性使用和 BeginTime 属性大致相同的语法来表示时间。再次说明，当你想要设置秒时不要设置成了天！ Duration 也可以被设置为特殊的值 "Forever" 或 "Automatic"。默认的值是 "Automatic"。关于这些特殊值的含义，请参见 Silverlight SDK 中的 Duration 对象参考。
FillBehavior：时间线停止后的行为。本属性有两个值可选 Stop 和 HoldEnd。 "Stop" 将值返回到动画开始之前的属性值； "HoldEnd" 指示动画属性停留在动画最后的值。默认值是 "HoldEnd"。
RepeatBehavior：指示时间线的重复频率。该属性可以是三种类型的值：重复数量、时间值、或特殊值 Forever。
- "Forever" 导致时间线立即重复。
- 一个有限的时间值导致时间线播放特定的时间长度。比如，为一个 Duration 为 2.5 秒的动画设置 RepeatBehavior 为 "0:0:5" ，动画将重复两次。
- 一个循环值导致时间线循环特定的次数。使用下面的语法表示循环值：iterationCountx。比如，值 "4x" 让时间线重复 4 次。默认值是 "1x"，这使时间线播放一次。

下面的示例演示了这些时间线属性。

[隐藏 XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard 
              Storyboard.TargetName="e1"
              Storyboard.TargetProperty="(Canvas.Left)"
              BeginTime="0:0:1">
            <DoubleAnimation To="300" />
            <DoubleAnimation To="300" Storyboard.TargetName="e2"/>
            <DoubleAnimation To="80" Storyboard.TargetName="e3" Storyboard.TargetProperty="Width"/>
            <DoubleAnimation From="200" To="300" Storyboard.TargetName="e4"/>
            <DoubleAnimation To="300" Duration="0:0:5.3" Storyboard.TargetName="e5"/>
            <DoubleAnimation FillBehavior="HoldEnd" To="200" Storyboard.TargetName="e6"/>
            <DoubleAnimation FillBehavior="Stop" To="200" Storyboard.TargetName="e7"/>
            <DoubleAnimation RepeatBehavior="Forever" To="300" Storyboard.TargetName="e8"/>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  <Ellipse x:Name="e1" Fill="Black"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"/>
  <TextBlock Canvas.Left="0" Canvas.Top="30">e1</TextBlock>
  <Ellipse x:Name="e2" Fill="Red"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="50"/>
  <TextBlock Canvas.Left="0" Canvas.Top="50" Foreground="Red">e2</TextBlock>
  <Ellipse x:Name="e3" Fill="Purple"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="70"/>
  <TextBlock Canvas.Left="0" Canvas.Top="70" Foreground="Purple">e3</TextBlock>
  <Ellipse x:Name="e4" Fill="Blue"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="90"/>
  <TextBlock Canvas.Left="0" Canvas.Top="90" Foreground="Blue">e4</TextBlock>
  <Ellipse x:Name="e5" Fill="Green"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="110"/>
  <TextBlock Canvas.Left="0" Canvas.Top="110" Foreground="Green">e5</TextBlock>
  <Ellipse x:Name="e6" Fill="Black"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="130"/>
  <TextBlock Canvas.Left="0" Canvas.Top="130" Foreground="Black">e6</TextBlock>
  <Ellipse x:Name="e7" Fill="Orange"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="150"/>
  <TextBlock Canvas.Left="0" Canvas.Top="150" Foreground="Orange">e7</TextBlock>
  <Ellipse x:Name="e8" Fill="Red"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="170"/>
  <TextBlock Canvas.Left="0" Canvas.Top="170" Foreground="Red">e8</TextBlock>
</Canvas>

[隐藏] [重新开始]

设定动画转换值

DoubleAnimation、ColorAnimation 和 PointAnimation 有 From 和 To 属性来设定动画属性的开始和结束值。如果 From 没有被设定，动画的属性当前值被用作动画的开始值。你可以使用 By 属性设置偏移量来代替使用 To 属性设置结束值。

下一步是什么

下一个主题，脚本，描述了如何让你的 Silverlight 内容具有交互性。

千一网络译