Partager via

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

  • Article

Cet exemple montre comment simplifier les animations à l’aide d’objets enfants ParallelTimeline . Il Storyboard s’agit d’un type qui Timeline fournit des informations de ciblage pour les chronologie qu’il contient. Utilisez un Storyboard pour fournir chronologie informations de ciblage, y compris les informations relatives aux objets et aux propriétés.

Pour commencer une animation, utilisez un ou plusieurs ParallelTimeline objets comme éléments enfants imbriqués d’un Storyboard. Ces ParallelTimeline objets peuvent contenir d’autres animations et, par conséquent, peuvent mieux encapsuler les séquences de minutage dans des animations complexes. Par exemple, si vous animez une TextBlock et plusieurs formes dans le même Storyboard, vous pouvez séparer les animations pour les formes et les TextBlock formes, en les plaçant dans une forme distincte ParallelTimeline. Étant donné que chacun ParallelTimeline a ses propres BeginTime éléments enfants du ParallelTimeline début par rapport à ce BeginTime, le minutage est mieux encapsulé.

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

Remarque sur les performances : bien que vous puissiez imbriquer Storyboard des chronologie entre elles, ParallelTimelineelles conviennent davantage à l’imbrication, car elles nécessitent moins de surcharge. (La Storyboard classe hérite de la ParallelTimeline classe.)

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