如何：使用子时间线简化动画

项目
08/12/2011

此示例演示如何使用子 ParallelTimeline 对象简化动画。 Storyboard 是一种为其包含的时间线提供目标信息的 Timeline。使用 Storyboard 来提供时间线目标信息，其中包括对象和属性信息。

若要开始动画，请使用一个或多个 ParallelTimeline 对象作为 Storyboard 的嵌套子元素。这些 ParallelTimeline 对象可以包含其他动画，因此可以更好地封装复杂动画中的计时序列。例如，如果要使同一 Storyboard 中的 TextBlock 和若干形状产生动画效果，您可以将 TextBlock 和形状的动画分开，将每个动画分别放在单独的 ParallelTimeline 中。由于每个 ParallelTimeline 都有自己的 BeginTime，并且 ParallelTimeline 的所有子元素都相对于此 BeginTime 开始，因此可以更好地封装计时。

下面的示例使同一 Storyboard 内的两段文本（TextBlock 对象）产生动画效果。 ParallelTimeline 封装其中一个 TextBlock 对象的动画。

**性能说明：**尽管可以将 Storyboard 时间线相互嵌套，但 ParallelTimeline 更适合于嵌套，因为它们需要的系统开销较少。（Storyboard 类从 ParallelTimeline 类继承。）

示例

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas >

    <!-- TextBlock with text "ParallelTimelines are..." that gets animated. -->
    <TextBlock Name="FirstTextBlock" Canvas.Top="30" Canvas.Left="300" FontSize="24" >
      ParallelTimelines are...
      <TextBlock.RenderTransform>
        <TransformGroup>
          <SkewTransform x:Name="FirstTextBlockSkew" CenterX="25" CenterY="25" AngleX="0" AngleY="0" />
        </TransformGroup>
      </TextBlock.RenderTransform>
    </TextBlock>

    <!-- TextBlock with text "Useful" that gets animated. -->
    <TextBlock Name="SecondTextBlock" Opacity="0" Canvas.Top="30" Canvas.Left="585" FontSize="24" >
      Useful
      <TextBlock.RenderTransform>
        <TransformGroup>
          <SkewTransform x:Name="SecondTextBlockSkew" CenterX="25" CenterY="25" AngleX="0" AngleY="0" />
          <ScaleTransform x:Name="SecondTextBlockScale" CenterX="0" CenterY="24" />
        </TransformGroup>
      </TextBlock.RenderTransform>
    </TextBlock>

    <!-- Event Trigger that controls all animations on the page. -->
    <Canvas.Triggers>
      <EventTrigger RoutedEvent="Canvas.Loaded">
        <BeginStoryboard>
          <Storyboard>

            <!-- "ParallelTimelines are..." fades into view. -->
            <DoubleAnimation Storyboard.TargetName="FirstTextBlock"
            Storyboard.TargetProperty="Opacity" Duration="0:0:2" From="0" To="1" />

            <!-- "ParallelTimelines are..." skews to the left. -->
            <DoubleAnimation Storyboard.TargetName="FirstTextBlockSkew"
            Storyboard.TargetProperty="AngleX" Duration="0:0:1" BeginTime="0:0:2" From="0" To="45" />

            <!-- This ParallelTimeline contains all the animations for the TextBlock with the text
            "Useful" in it. This ParallelTimeline begins 4 seconds after the Storyboard timeline begins and all child
            animations begin relative to this parent timeline. -->
            <ParallelTimeline BeginTime="0:0:4">

              <!-- "Useful" fades into view. -->
              <DoubleAnimation Storyboard.TargetName="SecondTextBlock"
              Storyboard.TargetProperty="Opacity" Duration="0:0:2" From="0" To="1" />

              <!-- "Useful" slides in from the right. -->
              <DoubleAnimation Storyboard.TargetName="SecondTextBlockSkew"
              Storyboard.TargetProperty="AngleX" Duration="0:0:2" From="90" To="180" />

              <!-- "Useful" skews to the right. -->
              <DoubleAnimation Storyboard.TargetName="SecondTextBlockSkew"
              Storyboard.TargetProperty="AngleX" BeginTime="0:0:3" Duration="0:0:0.2" From="0" To="-60" />

              <!-- "Useful" Gets taller. -->
              <DoubleAnimation Storyboard.TargetName="SecondTextBlockScale"
              Storyboard.TargetProperty="ScaleY" BeginTime="0:0:3" Duration="0:0:0.2" From="1" To="3" />
            </ParallelTimeline>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Canvas.Triggers>
  </Canvas>
</Page>

通过

如何：使用子时间线简化动画

示例

请参见

任务

概念

其他资源