Procedura: semplificare le animazioni utilizzando oggetti Timeline figlio

Aggiornamento: novembre 2007

In questo esempio viene illustrato come semplificare le animazioni utilizzando oggetti ParallelTimeline figlio. Storyboard è un tipo di oggetto Timeline che fornisce informazioni sulla destinazione per gli oggetti Timeline che contiene. Utilizzare un oggetto Storyboard per fornire informazioni sulla destinazione degli oggetti Timeline, tra cui informazioni su oggetti e proprietà.

Per iniziare un'animazione, utilizzare uno o più oggetti ParallelTimeline come elementi figlio nidificati di un oggetto Storyboard. Questi oggetti ParallelTimeline possono contenere altre animazioni e pertanto possono incapsulare in modo più efficace le sequenze temporali nelle animazioni complesse. Ad esempio, se si applica l'animazione a un oggetto TextBlock e a diverse forme nello stesso oggetto Storyboard, è possibile separare le animazioni per l'oggetto TextBlock e per le forme, inserendole ognuna in un oggetto ParallelTimeline distinto. Poiché ogni oggetto ParallelTimeline include una proprietà BeginTime e tutti gli elementi figlio dell'oggetto ParallelTimeline iniziano in base a questa proprietà BeginTime, le sequenze temporali risultano incapsulate in modo migliore.

Nell'esempio seguente vengono animate due parti di testo (oggettiTextBlock) dall'interno dello stesso oggetto Storyboard. Un oggetto ParallelTimeline incapsula le animazioni di uno degli oggetti TextBlock.

Nota sulle prestazioni: anche se è possibile nidificare gli oggetti Timeline Storyboard uno nell'altro, gli oggetti ParallelTimeline sono più adatti per la nidificazione perché l'overhead richiesto è minore. La classe Storyboard eredita dalla classe ParallelTimeline.

Esempio

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

Vedere anche

Attività

Procedura: specificare HandoffBehavior tra le animazioni storyboard

Concetti

Cenni preliminari sull'animazione