Información general sobre comportamientos de control de tiempo

Artículo
05/04/2023

Este tema describe 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, consulte Información general sobre animaciones.

Tipos de objetos Timeline

Un 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á o la velocidad a la que progresará el tiempo en ese segmento, entre otras.

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

Tipos de objetos Timeline	Descripción
AnimationTimeline	Clase base abstracta para objetos Timeline que genera valores de salida para las propiedades de animación.
MediaTimeline	Genera la salida de un archivo multimedia.
ParallelTimeline	Tipo de TimelineGroup que agrupa y controla objetos secundarios Timeline.
Storyboard	Tipo de ParallelTimeline que proporciona información de establecimiento 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 un objeto Timeline

Un Timeline representa un segmento de tiempo, y la longitud de un objeto de escala de tiempo se puede describir de maneras diferentes. La siguiente tabla define varios términos para describir la longitud de un objeto Timeline.

Término	Descripción	Propiedades
Duración simple	El intervalo de tiempo que un objeto Timeline tarda en realizar una iteración de avance.	Duration
Una repetición	Intervalo de tiempo que tarda un objeto de escala de tiempo en reproducirse una vez hacia adelante y, si la propiedad AutoReverse es verdadero, en reproducirse una vez hacia atrás.	Duration, AutoReverse
Período activo	Intervalo de tiempo que tarda un objeto de 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 se determina por la de la escala de tiempo Duration. Cuando un objeto Timeline llega al final de su duración, detiene la reproducción. Si el objeto Timeline tiene objetos Timeline secundarios, su reproducción también se detiene. En el caso de una animación, la propiedad Duration especifica cuánto tiempo tarda la animación en la transición desde su valor inicial hasta su valor final. La duración de un objeto de escala de tiempo se denomina a veces duración simple, para distinguir entre la duración de una sola iteración y el tiempo total que tarda en reproducirse la animación, incluidas las repeticiones. Puede especificar una duración usando un valor de tiempo finito o los valores especiales Automatic o Forever. La duración de una animación se debe resolver en un valor TimeSpan para que pueda realizar la transición entre valores.

El ejemplo siguiente muestra un DoubleAnimation con un 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 significa que terminan automáticamente cuando el último elemento secundario termina de reproducirse. En el siguiente ejemplo se muestra un Storyboard cuyo Duration se resuelve en cinco segundos, el intervalo de tiempo que tardan todos los objetos secundarios DoubleAnimation en completarse.

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

Al establecer el Duration de una escala de tiempo contenedora en un valor TimeSpan, se puede forzar una reproducción más larga o más corta que la de sus objetos secundarios Timeline. Si establece el Duration en un valor que es menor que la duración de la escala de tiempo del contenedor de los objetos secundarios Timeline, los objetos secundarios Timeline se detendrán cuando la escala de tiempo del contenedor finalice. En el ejemplo siguiente se establece el Duration del Storyboard de los ejemplos anteriores en tres segundos. Como resultado, la primera instancia de 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 Timeline controla las veces que una animación repite su duración simple. Con la propiedad RepeatBehavior se puede especificar cuántas veces se reproduce la escala de tiempo (una iteración Count) o el período total de tiempo durante el cual debe reproducirse (una repetición Duration). En cualquier caso, la animación pasa por tantas repeticiones de principio a fin como sean necesarias para completar el recuento o la duración solicitados. De forma predeterminada, los objetos escala de tiempo tienen una iteración de 1.0, lo que significa que se reproducen una vez y no se repiten.

En el ejemplo siguiente se muestra una propiedad RepeatBehavior que hace que DoubleAnimation se reproduzca durante el doble de tiempo de su duración simple mediante la especificación de 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 usa la propiedad RepeatBehavior para que DoubleAnimation se reproduzca durante la mitad de tiempo 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 un Timeline en Forever, el Timeline se repite hasta que se detiene, bien de forma interactiva, bien por el sistema de control de tiempo. En el ejemplo siguiente se usa la propiedad RepeatBehavior para hacer que DoubleAnimationse reproduzca de manera indefinida.

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

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

Propiedad AutoReverse

La propiedad AutoReverse especifica si un Timeline se va a reproducir hacia atrás al final de cada iteración hacia adelante. En el ejemplo siguiente se establece la propiedad AutoReverse de un DoubleAnimation en true; como resultado, se produce una animación de 0 a 100 y, a continuación, de 100 a 0. 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 usa un valor Count para especificar el RepeatBehavior de un Timeline y la propiedad AutoReverse de ese Timeline es true, una repetición simple consiste en una iteración hacia adelante seguida de una iteración hacia atrás. En el ejemplo siguiente se establece el RepeatBehavior del DoubleAnimation en el ejemplo anterior en un Count de dos. Como resultado, el DoubleAnimation se reproduce durante 20 segundos: hacia adelante durante cinco segundos, hacia atrás durante cinco segundos, hacia adelante durante 5 segundos de nuevo y, finalmente, 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 la escala de tiempo de un contenedor tiene objetos secundarios Timeline, su reproducción se invierte cuando lo hace su contenedor. Para obtener ejemplos adicionales, consulte Especificar si un objeto escala de tiempo se invierte automáticamente.

Propiedad BeginTime

La propiedad BeginTime habilita que se pueda especificar cuándo empieza una escala de tiempo. El momento de inicio de un objeto Timeline es relativo a su objeto Timeline primario. Un tiempo de inicio de cero segundos significa que el objeto Timeline se inicia tan pronto lo hace su primario; cualquier otro valor crea un desfase entre el momento en que se empieza a reproducir el Timeline primario y el momento en que lo hace el secundario. Por ejemplo, un tiempo de inicio de dos segundos significa que el objeto Timeline empieza a reproducirse cuando su elemento primario ha alcanzado un tiempo de dos segundos. De forma predeterminada, todos los objetos Timeline tienen un tiempo de inicio de cero segundos. También se puede establecer el tiempo de inicio de una escala de tiempo en null, lo que impide que la escala de tiempo se inicie. En WPF se especifica null mediante la extensión de marcado x:Null.

Tenga en cuenta que el tiempo de inicio no se aplica cada vez que una escala de tiempo se repite, debido a la configuración de la opción RepeatBehavior. Si quisiera crear una animación con un BeginTime de 10 segundos y un RepeatBehavior de Forever, habría un retardo de 10 segundos antes de que la animación se reprodujera la primera vez, pero no con cada repetición sucesiva. Sin embargo, si se reinicia o repite el objeto Timeline primario, se produciría el retraso de 10 segundos.

La propiedad BeginTime es útil para escalas de tiempo escalonadas. En el ejemplo siguiente se crea un elemento Storyboard que tiene DoubleAnimation objetos secundarios. La primera animación tiene un Duration de cinco segundos y la segunda tiene un Duration de 3 segundos. En el ejemplo se establece el BeginTime del segundo DoubleAnimation en 5 segundos para que la comience su reproducción después de que termine el primer 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 un Timeline llega al final de su duración activa total, la propiedad FillBehavior especifica si se detiene o si retiene su último valor. Una animación con un FillBehavior o HoldEnd «mantiene» su valor de salida: la propiedad que está animada retiene 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 elemento Storyboard que tiene DoubleAnimation objetos secundarios. Ambos objetos DoubleAnimation animan el Width de un Rectangle de 0 a 100. Los elementos Rectangle tienen valores no animados Width de 500 [píxeles independientes del dispositivo].

La propiedad FillBehavior del primer DoubleAnimation se establece en HoldEnd, el valor predeterminado. Como resultado, la anchura del rectángulo se mantiene en 100 después de que el DoubleAnimation termine.
La propiedad FillBehavior del segundo DoubleAnimation se establece en Stop. Como resultado, el Width del segundo Rectangle revierte a 500 después de que el 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 un objeto Timeline

La clase Timeline proporciona tres propiedades que especifican su velocidad:

SpeedRatio: especifica la velocidad, en relación con el elemento primario, a la que progresa el tiempo para un Timeline. Los valores mayores que uno aumentan la velocidad del Timeline y sus objetos secundarios Timeline; los valores entre cero y uno lo ralentizan. Un valor de uno indica que Timeline progresa a la misma velocidad que su elemento primario. La configuración SpeedRatio de una escala de tiempo de contenedor también afecta a todos sus objetos secundarios Timeline.
AccelerationRatio: especifica el porcentaje del Duration de una escala de tiempo que se usa en acelerar. Para obtener un ejemplo, consulte Cómo: Aumentar o reducir la velocidad de una animación.
DecelerationRatio: especifica el porcentaje del Duration de una escala de tiempo que se usa en decelerar. Para obtener un ejemplo, consulte Cómo: Aumentar o reducir la velocidad de una animación.

Compartir a través de