Cómo: Simplificar animaciones utilizando objetos Timeline secundarios

En este ejemplo se muestra cómo simplificar las animaciones con objetos ParallelTimeline secundarios. Storyboard es un tipo de Timeline que proporciona información de destino para las escalas de tiempo que contiene. Utilice Storyboard para proporcionar información de destino para las escalas de tiempo, incluida la información de objetos y propiedades.

Para comenzar una animación, utilice uno o más objetos ParallelTimeline como elementos secundarios anidados de un objeto Storyboard. Estos objetos ParallelTimeline pueden contener otras animaciones y, por consiguiente, pueden encapsular mejor las secuencias de control de tiempo en las animaciones complejas. Por ejemplo, si va a animar un control TextBlock y varias formas en el mismo objeto Storyboard, puede separar las animaciones correspondientes a TextBlock y a las formas y colocar cada una de ellas en un objeto ParallelTimeline independiente. Dado que ParallelTimeline tiene su propia propiedad BeginTime y que todos los elementos secundarios del objeto ParallelTimeline comienzan de manera relativa con respecto a BeginTime, es mejor encapsular el control de tiempo.

En el ejemplo siguiente se animan dos fragmentos de texto (objetos TextBlock) desde el mismo objeto Storyboard. ParallelTimeline encapsula las animaciones de uno de los objetos TextBlock.

Nota sobre rendimiento: aunque puede anidar entre sí las escalas de tiempo de Storyboard, los objetos ParallelTimeline son más adecuados para la anidación, porque requieren menos sobrecarga. (La clase Storyboard hereda de la clase ParallelTimeline.)

Ejemplo

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

Vea también

Tareas

Cómo: Especificar HandoffBehavior entre animaciones de guión gráfico

Conceptos

Información general sobre animaciones