Partager via

Guide pratique pour simplifier les animations à l’aide de chronologies enfants

  • Article

Cet exemple montre comment simplifier les animations à l’aide des objets enfants ParallelTimeline. 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 temporel, notamment des informations sur l’objet et les propriétés.

Pour commencer une animation, utilisez un ou plusieurs objets ParallelTimeline comme éléments imbriqués de Storyboard. Ces objets ParallelTimeline peuvent contenir d’autres animations et peuvent donc mieux encapsuler les séquences de minutage dans les animations complexes. Par exemple, si vous animez une TextBlock et plusieurs formes dans la même Storyboard, vous pouvez séparer les animations de l'TextBlock et des formes, en les plaçant dans une ParallelTimelinedistincte. Étant donné que chaque ParallelTimeline a son propre BeginTime et que tous les éléments enfants de l'ParallelTimeline commencent en référence à ce BeginTime, la synchronisation est mieux encapsulée.

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

Note de performance : Bien que vous puissiez imbriquer Storyboard des chronologies les unes dans les autres, les ParallelTimelinesont plus adaptées pour l'imbrication, car elles nécessitent moins de ressources. (La classe Storyboard hérite de la classe ParallelTimeline.)

Exemple

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

Voir aussi