Практическое руководство. Упрощение анимации с помощью дочерних шкал времени

В этом примере показано, как упростить анимацию с помощью дочерних объектов ParallelTimeline. Storyboard является типом Timeline, предоставляющим сведения о содержащихся в нем объектах шкалы времени. Используйте Storyboard для предоставления сведений о шкале времени, включая информацию об объектах и свойствах.

Чтобы начать анимацию, используйте один или несколько объектов ParallelTimeline в качестве вложенных дочерних элементов Storyboard. Эти объекты ParallelTimeline могут содержать другие анимации и, таким образом, могут лучше инкапсулировать временные последовательности в сложных анимациях. Например, если осуществляется анимация TextBlock и нескольких фигур в одном Storyboard, то можно разделить анимацию для TextBlock и фигур, помещая каждую в отдельный объект ParallelTimeline. Поскольку в каждом ParallelTimeline имеется собственное свойство BeginTime и все дочерние элементы ParallelTimeline начинаются относительно этого BeginTime, то время инкапсулируется лучше.

В приведенном ниже примере осуществляется анимация двух фрагментов текста (объектов TextBlock) внутри одного и того же Storyboard. 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>

См. также

Задачи

Практическое руководство. Задание значения свойства HandoffBehavior для анимаций раскадровки

Основные понятия

Общие сведения об эффектах анимации