Procedura: semplificare le animazioni utilizzando oggetti Timeline figlio

Questo esempio illustra 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, usare 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 in animazioni complesse. Ad esempio, se si animano una TextBlock e più forme nella stessa Storyboardclasse , è possibile separare le animazioni per TextBlock e le forme, inserendo ognuna in un oggetto separato ParallelTimeline. Poiché ognuno ParallelTimeline ha il proprio BeginTime e tutti gli elementi figlio dell'inizio rispetto a questo BeginTime, l'intervallo ParallelTimeline è meglio 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 prestazioni: Anche se è possibile annidare Storyboard le sequenze temporali l'una all'altra, ParallelTimelines sono più adatte per l'annidamento perché richiedono meno sovraccarico. 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>

Vedere anche