Gewusst wie: Vereinfachen von Animationen durch untergeordnete Timeline-Objekte

Aktualisiert: November 2007

In diesem Beispiel wird gezeigt, wie Animationen durch untergeordnete ParallelTimeline-Objekte vereinfacht werden. Bei einem Storyboard handelt es sich um eine Art von Timeline-Objekt, das die Zielinformationen für die enthaltenen Timeline-Objekte zur Verfügung stellt. Verwenden Sie eine Storyboard-Klasse, um Zielinformationen für Timeline-Objekte zur Verfügung zu stellen, einschließlich Objekt- und Eigenschafteninformationen.

Um eine Animation zu starten, verwenden Sie ein oder mehrere ParallelTimeline-Objekte als geschachtelte untergeordnete Elemente eines Storyboard. Diese ParallelTimeline-Objekte können andere Animationen enthalten und daher die Zeitabfolge in komplexen Animationen besser kapseln. Wenn Sie beispielsweise einen TextBlock und mehrere Formen im selben Storyboard animieren, können Sie die Animationen für den TextBlock und für die Formen trennen, indem Sie diese jeweils in einer eigenen ParallelTimeline speichern. Da jede ParallelTimeline über eine eigene BeginTime verfügt und alle untergeordneten Elemente der ParallelTimeline in Relation zu dieser BeginTime beginnen, ist die Zeitsteuerung besser gekapselt.

Im folgenden Beispiel werden zwei Textteile (TextBlock-Objekte) innerhalb des gleichen Storyboard animiert. Eine ParallelTimeline kapselt die Animationen eines der TextBlock-Objekte.

Leistungshinweis: Obwohl Timeline-Objekte von Storyboard ineinander verschachtelt werden können, eignen sich ParallelTimeline-Objekte wegen des geringeren Aufwands besser zum Verschachteln. (Die Storyboard-Klasse erbt von der ParallelTimeline-Klasse.)

Beispiel

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

Siehe auch

Aufgaben

Gewusst wie: Angeben des Übergabeverhaltens zwischen Storyboard-Animationen

Konzepte

Übersicht über Animationen