Gewusst wie: Vereinfachen von Animationen durch untergeordnete Timeline-Objekte

  • Artikel

Dieses Beispiel zeigt, wie Sie Animationen durch die Verwendung von untergeordneten ParallelTimeline-Objekten vereinfachen können. Storyboard ist ein Typ vonTimeline, der Zielinformationen für die darin enthaltenen Zeitleisten liefert. Verwenden Sie Storyboard, um Informationen zur Zeitleiste zu liefern, einschließlich Objekt- und Eigenschaftsinformationen.

Um eine Animation zu starten, verwenden Sie eins oder mehrere ParallelTimeline-Objekte als verschachtelte untergeordnete Elemente einer Storyboard. Diese ParallelTimeline-Objekte können andere Animationen enthalten und daher die zeitlichen Abläufe in komplexen Animationen besser kapseln. Wenn Sie z. B. eine TextBlock und mehrere Formen in derselben Storyboard animieren, können Sie die Animationen für die TextBlock und die Formen trennen, indem Sie sie jeweils in einer separaten ParallelTimeline ablegen. Da jedes ParallelTimeline seine eigenen BeginTime hat und alle untergeordneten Elemente von ParallelTimeline relativ zu diesem BeginTime starten, ist das Timing besser gekapselt.

Das folgende Beispiel animiert zwei Textstücke (TextBlock-Objekte) aus demselben Storyboard. ParallelTimeline kapselt die Animationen eines der TextBlock-Objekte.

Hinweis zur Leistung: Obwohl Sie Storyboard-Zeitachsen ineinander verschachteln können, eignen sich ParallelTimeline besser für die Verschachtelung, da sie weniger Overhead erfordern. (Die Storyboard-Klasse erbt von der ParallelTimeline-Klasse.)

Beispiel

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://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>

Siehe auch