Condividi tramite

Procedura: semplificare le animazioni utilizzando oggetti Timeline figlio

  • Articolo

In questo esempio viene illustrato come semplificare le animazioni usando oggetti figlio ParallelTimeline . Un Storyboard è un tipo di che fornisce informazioni di Timeline destinazione per le sequenze temporali in esso contenute. Usare un Storyboard oggetto per fornire informazioni sulla destinazione della sequenza temporale, incluse le informazioni sull'oggetto e sulle proprietà.

Per iniziare un'animazione, usa uno o più ParallelTimeline oggetti come elementi figlio annidati di un oggetto Storyboard. Questi ParallelTimeline oggetti possono contenere altre animazioni e pertanto possono incapsulare meglio le sequenze temporali nelle animazioni complesse. Ad esempio, se stai animando una TextBlock e più forme nella stessa Storyboard, puoi separare le animazioni per TextBlock le forme e , inserendo ognuna in un oggetto separato ParallelTimeline. Poiché ognuno ParallelTimeline ha i propri BeginTime elementi figlio e tutti gli elementi figlio dell'inizio rispetto a questo BeginTime, l'intervallo ParallelTimeline è migliore incapsulato.

Nell'esempio seguente vengono animate due parti di testo (TextBlock oggetti) all'interno dello stesso Storyboardoggetto . Incapsula ParallelTimeline le animazioni di uno degli TextBlock oggetti .

Nota sulle prestazioni: anche se è possibile annidare Storyboard le sequenze temporali l'una all'altra, ParallelTimelines sono più adatte per l'annidamento perché richiedono meno overhead. La Storyboard classe eredita dalla ParallelTimeline classe .

Esempio

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

Vedi anche