Información general sobre comportamientos de control de tiempo

Artículo
08/10/2011

En este tema se describen los comportamientos de control de tiempo de las animaciones y otros objetos Timeline.

Requisitos previos

Para entender este tema, debe estar familiarizado con las características de animación básicas. Para obtener más información, vea Información general sobre animaciones.

Tipos de escalas de tiempo

Una Timeline representa un segmento de tiempo. Proporciona propiedades que permiten especificar la longitud de ese segmento, cuándo debe iniciarse, cuántas veces se repetirá, con qué velocidad progresará el tiempo en ese segmento, etc.

Las clases que heredan de la clase de escala de tiempo proporcionan funcionalidades adicionales, como reproducción de animaciones y multimedia. WPF proporciona los tipos Timeline siguientes.

Tipo de escala de tiempo	Descripción
AnimationTimeline	Clase base abstracta para los objetos Timeline que generan los valores de salida para animar propiedades.
MediaTimeline	Genera la salida de un archivo multimedia.
ParallelTimeline	Un tipo de TimelineGroup que agrupa y controla objetos Timeline secundarios.
Storyboard	Un tipo de ParallelTimeline que proporciona información de destino para los objetos de escala de tiempo que contiene.
Timeline	Clase base abstracta que define los comportamientos de control de tiempo.
TimelineGroup	Clase abstracta para objetos Timeline que pueden contener otros objetos Timeline.

Propiedades que controlan la longitud de una escala de tiempo

Timeline representa un segmento de tiempo. La longitud de una escala de tiempo se puede describir de maneras diferentes. En la tabla siguiente se definen varios términos que describen la longitud de una escala de tiempo.

Término	Descripción	Propiedades
Duración simple	El intervalo de tiempo que tarda una escala de tiempo en realizar una sola iteración de avance.	Duration
Una repetición	El intervalo de tiempo que tarda una escala de tiempo en reproducirse hacia delante una vez y, si la propiedad AutoReverse es true, en reproducirse una vez hacia atrás.	Duration, AutoReverse
Período activo	Intervalo de tiempo que tarda una escala de tiempo en completar todas las repeticiones especificadas por su propiedad RepeatBehavior.	Duration, AutoReverse, RepeatBehavior

Propiedad Duration

Como se ha mencionado previamente, una escala de tiempo representa un segmento de tiempo. La longitud de ese segmento la determina la propiedad Duration de la escala de tiempo. Cuando una escala de tiempo llega al fin de su duración, su reproducción se detiene. Si la escala de tiempo tiene escalas de tiempo secundarias, también se detiene su reproducción. En el caso de una animación, Duration especifica cuánto tiempo tarda la animación en efectuar la transición desde su valor inicial hasta su valor final. La duración de una escala de tiempo se denomina, en ocasiones, su duración simple, para distinguir entre la duración de una iteración única y el intervalo de tiempo total durante el que se reproduce una animación, incluidas las repeticiones. Puede especificar una duración mediante un valor de tiempo finito, o con los valores especiales Automatic o Forever. La duración de una animación se debe resolver en un valor TimeSpan, para que pueda efectuar la transición entre valores.

En el ejemplo siguiente se muestra una DoubleAnimation con una Duration de cinco segundos.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5"  />

Las escalas de tiempo contenedoras, como Storyboard y ParallelTimeline, tienen una duración predeterminada de Automatic, lo que quiere decir que finalizan automáticamente cuando se detiene la reproducción de la última escala de tiempo secundaria. En el ejemplo siguiente se muestra un Storyboard cuya Duration se resuelve en cinco segundos, el intervalo de tiempo que tardan en completarse todos sus objetos DoubleAnimation secundarios.

<Storyboard >

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

Estableciendo la Duration de una escala de tiempo contenedora en un valor de TimeSpan, puede forzar una reproducción durante más o menos tiempo que el que tardarían en reproducirse sus objetos Timeline secundarios. Si establece Duration en un valor que es menor que la longitud de los objetos Timeline secundarios de la escala de tiempo contenedora, la reproducción de los objetos Timeline secundarios se detendrá cuando lo haga la escala de tiempo contenedora. En el ejemplo siguiente se establece la Duration del Storyboard de los ejemplos anteriores en tres segundos. Como resultado, la reproducción de la primera DoubleAnimation se detiene transcurridos tres segundos, cuando ha animado el ancho del rectángulo de destino hasta 60.

<Storyboard Duration="0:0:3">

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

Propiedad RepeatBehavior

La propiedad RepeatBehavior de un objeto Timeline controla cuántas veces repite su duración simple. Con la propiedad RepeatBehavior, puede especificar cuántas veces se reproduce la escala de tiempo (Count de iteración) o el intervalo de tiempo total durante el que se debe reproducir (Duration de repetición). En cualquier caso, la animación pasa por tantas repeticiones de principio a fin como sea necesario para rellenar el recuento o la duración solicitados. De manera predeterminada, las escalas de tiempo tienen una iteración de 1.0, lo que significa que se reproducen una vez y no se repiten en absoluto.

En el ejemplo siguiente se utiliza la propiedad RepeatBehavior para reproducir DoubleAnimation durante dos veces su duración simple especificando un recuento de iteraciones.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2x" />

En el ejemplo siguiente se utiliza la propiedad RepeatBehavior para reproducir DoubleAnimation durante la mitad de su duración simple.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="0.5x" />

Si establece la propiedad RepeatBehavior de Timeline en Forever, Timeline se repite hasta que se detenga interactivamente o por el sistema de control de tiempo. En el ejemplo siguiente se utiliza la propiedad RepeatBehavior para que DoubleAnimation se reproduzca indefinidamente.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="Forever" />

Para obtener otro ejemplo, vea Cómo: Repetir una animación.

Propiedad AutoReverse

La propiedad AutoReverse especifica si una Timeline se reproducirá hacia atrás al final de cada iteración de avance. En el ejemplo siguiente se establece la propiedad AutoReverse de DoubleAnimation en true. Como resultado, se anima de cero a 100 y, a continuación, de 100 a cero. Se reproduce durante un total de 10 segundos.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  AutoReverse="True" />

Cuando se utiliza un valor de Count para especificar el RepeatBehavior de Timeline y la propiedad AutoReverse de esa Timeline es true, una repetición única está compuesta de una iteración de avance seguida por una iteración de retroceso. En el ejemplo siguiente se establece el RepeatBehavior de la DoubleAnimation de los ejemplos anteriores en un Count de dos. Como resultado, DoubleAnimation se reproduce durante 20 segundos: hacia delante durante cinco segundos, hacia atrás durante cinco segundos, de nuevo hacia delante durante 5 segundos y, por último, hacia atrás durante cinco segundos.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2" 
  AutoReverse="True" />

Si una escala de tiempo contenedora contenedor tiene objetos Timeline secundarios, su reproducción se invierte cuando lo hace la escala de tiempo contenedora. Para obtener otros ejemplos, vea Cómo: Especificar si una escala de tiempo se invierte automáticamente.

Propiedad BeginTime

La propiedad BeginTime permite especificar cuándo se inicia una escala de tiempo. El momento de inicio de una escala de tiempo es relativa a su escala de tiempo primaria. Un tiempo inicial de cero segundos significa que la escala de tiempo se inicia a la vez que su primaria; cualquier otro valor crea un desfase desde que se empieza a reproducir la escala de tiempo primaria hasta que se reproduce la escala de tiempo secundaria. Por ejemplo, un tiempo de inicio de dos segundo significa que la reproducción de la escala de tiempo se inicia cuando su elemento primario lleva dos segundos reproduciéndose. De manera predeterminada, todas las escalas de tiempo tienen un tiempo de inicio de cero segundos. También puede establecer el tiempo inicial de una escala de tiempo en null, lo que evita que la escala de tiempo se inicie. En WPF, se especifica null mediante la x:Null (Extensión de marcado).

Observe que el tiempo de inicio no se aplica cada vez que una escala de tiempo se repite a causa de su valor de RepeatBehavior. Si crea una animación con un BeginTime de 10 segundos y un RepeatBehavior de Forever, se producirá un retraso de 10 segundos antes de que la animación se reproduzca por primera vez, pero no para cada repetición sucesiva. Sin embargo, si se inicia o repite la escala de tiempo primaria de la animación, se producirá el retraso de 10 segundos.

La propiedad BeginTime resulta útil para escalonar escalas de tiempo. En el ejemplo siguiente se crea un Storyboard que tiene dos objetos DoubleAnimation secundarios. La primera animación tiene una Duration de cinco segundos y, la segunda, una Duration de 3 segundos. En el ejemplo se establece el BeginTime de la segunda DoubleAnimation en 5 segundos, para que empiece a reproducirse después de que finalice la primera DoubleAnimation.

<Storyboard>

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5" 
    BeginTime="0:0:0" />


  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  
    BeginTime="0:0:5" />

</Storyboard>

Propiedad FillBehavior

Cuando una Timeline llega al final de su duración activa total, la propiedad FillBehavior especifica si se detiene o mantiene su último valor. Una animación cuyo FillBehavior sea HoldEnd "mantendrá" su valor de salida: la propiedad animada conservará el último valor de la animación. Un valor de Stop hace que la animación deje de afectar a su propiedad de destino después de finalizar.

En el ejemplo siguiente se crea un Storyboard que tiene dos objetos DoubleAnimation secundarios. Ambos objetos DoubleAnimation animan la propiedad Width de un objeto Rectangle de 0 a 100. Los elementos Rectangle tienen valores Width no animados de 500 píxeles independientes del dispositivo.

La propiedad FillBehavior de la primera DoubleAnimation se establece en HoldEnd, el valor predeterminado. Como resultado, el ancho del rectángulo se mantiene en 100 después de que DoubleAnimation finalice.
La propiedad FillBehavior de la segunda DoubleAnimation se establece en Stop. Como resultado, el Width del segundo Rectangle revierte a 500 después de que DoubleAnimation finalice.

<Rectangle Name="MyRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Red">
</Rectangle>

<Rectangle Name="MyOtherRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Orange">
</Rectangle>

<Button Content="Start FillBehavior Example">
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5" 
            FillBehavior="HoldEnd" />
          <DoubleAnimation 
            Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5"  
            FillBehavior="Stop" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

Propiedades que controlan la velocidad de una escala de tiempo

La clase Timeline proporciona tres propiedades para especificar su velocidad:

SpeedRatio: especifica la velocidad, relativa a su elemento primario, a la que progresa el tiempo para una Timeline. Los valores mayores que uno aumentan la velocidad de Timeline y de sus objetos Timeline secundarios; los valores comprendidos entre cero y uno la reducen. Un valor de uno indica que Timeline progresa a la misma velocidad que su elemento primario. El valor SpeedRatio de una escala de tiempo contenedora también afecta a todos sus objetos Timeline secundarios.
AccelerationRatio: especifica el porcentaje de la Duration de una escala de tiempo que se dedica a acelerar. Para obtener un ejemplo, vea Cómo: Aumentar o reducir la velocidad de una animación.
DecelerationRatio: especifica el porcentaje de la Duration de una escala de tiempo que se dedica a decelerar. Para obtener un ejemplo, vea Cómo: Aumentar o reducir la velocidad de una animación.