Comment : simplifier des animations à l'aide de chronologies enfants

Cet exemple montre comment simplifier des animations à l'aide d'objets ParallelTimeline enfants. Un Storyboard est un type de Timeline qui fournit des informations de ciblage pour les chronologies qu'il contient. Utilisez un Storyboard pour fournir des informations de ciblage sur la chronologie, y compris des informations sur l'objet et la propriété.

Pour débuter une animation, utilisez un ou plusieurs objets ParallelTimeline comme éléments enfants imbriqués d'un Storyboard. Ces objets ParallelTimeline peuvent contenir d'autres animations et peuvent, par conséquent, mieux encapsuler les séquences temporelles dans des animations complexes. Par exemple, si vous animez un TextBlock et plusieurs formes dans le même Storyboard, vous pouvez séparer les animations pour le TextBlock et les formes, en les mettant chacune dans un ParallelTimeline séparé. Étant donné que chaque ParallelTimeline possède son propre BeginTime et que tous les éléments enfants du ParallelTimeline commencent par rapport à ce BeginTime, la séquence temporelle est mieux encapsulée.

L'exemple suivant anime deux parties de texte (objets TextBlock) à partir du même Storyboard. Un ParallelTimeline encapsule les animations de l'un des objets TextBlock.

Remarque sur les performances : bien que vous puissiez imbriquer des chronologies Storyboard les unes dans les autres, les ParallelTimelines sont plus appropriés pour l'imbrication car ils requièrent moins de charge mémoire. (La classe Storyboard hérite de la classe ParallelTimeline.)

Exemple

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

Voir aussi

Tâches

Comment : spécifier HandoffBehavior entre des animations de storyboard

Concepts

Vue d'ensemble de l'animation