Información general sobre los comportamientos de control de tiempo

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

Prerrequisitos

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

Tipos de escala de tiempo

Timeline representa un segmento de tiempo. Proporciona propiedades que permiten especificar la longitud de ese segmento, cuándo se debe iniciar, cuántas veces se repetirá, el tiempo rápido que avanza en ese segmento, etc.

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

Propiedades que controlan la longitud de una escala de tiempo

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

La propiedad Duración

Como se mencionó anteriormente, una escala de tiempo representa un segmento de tiempo. La longitud de ese segmento viene determinada por la línea de tiempo.Duration Cuando una línea de tiempo alcanza el final de su duración, se detiene. Si la escala de tiempo tiene escalas de tiempo secundarias, también dejan de jugar. En el caso de una animación, Duration especifica cuánto tiempo tarda la animación en pasar de su valor inicial a su valor final. A veces, la duración de una escala de tiempo se denomina duración simple, para distinguir entre la duración de una sola iteración y el tiempo total durante el que se reproduce la animación, incluidas las repeticiones. Puede especificar una duración mediante un valor de tiempo finito o los valores Automatic especiales o Forever. La duración de una animación debe resolverse en un TimeSpan valor, por lo que puede realizar la transición entre valores.

En el ejemplo siguiente se 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 del contenedor, como Storyboard y ParallelTimeline, tienen una duración predeterminada de , lo que significa que terminan automáticamente cuando su último elemento secundario deja de Automaticjugar. En el ejemplo siguiente se muestra un Storyboard cuya Duration resolución se traduce a cinco segundos, el tiempo que tardan todos sus objetos DoubleAnimation secundarios 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 la Duration de una escala de tiempo de contenedor en un TimeSpan valor, puede forzar una reproducción más larga o más corta de lo que sus objetos secundarios Timeline reproducirían. Si establece Duration en un valor menor que la longitud de los objetos secundarios Timeline de la línea de tiempo del contenedor, los objetos secundarios Timeline dejan de reproducirse cuando la línea de tiempo del contenedor se detiene. En el ejemplo siguiente se establece el Duration de los Storyboard ejemplos anteriores en tres segundos. Como resultado, la primera DoubleAnimation deja de progresar a los tres segundos, tras haber animado el ancho del rectángulo de destino a 60 píxeles.

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

La propiedad RepeatBehavior

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

En el ejemplo siguiente se usa la RepeatBehavior propiedad para hacer que una DoubleAnimation reproducción dure el doble de 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 siguiente ejemplo se utiliza la propiedad RepeatBehavior para que el DoubleAnimation se reproduzca durante la mitad de su duración total sencilla.

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

Si establece la RepeatBehavior propiedad de un Timeline a Forever, Timeline se repite hasta que se detiene de manera interactiva o por el sistema de control de tiempo. En el ejemplo siguiente se usa la RepeatBehavior propiedad para hacer que DoubleAnimation se ejecute indefinidamente.

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

Para obtener un ejemplo adicional, vea Repetir una animación.

La propiedad AutoReverse

La AutoReverse propiedad especifica si Timeline se reproducirá al revés al final de cada iteración hacia adelante. En el ejemplo siguiente se establece la AutoReverse propiedad de un DoubleAnimation a true; como resultado, se anima de cero a 100, y luego 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 usa un Count valor para especificar el RepeatBehavior de un Timeline y la AutoReverse propiedad de ese Timeline es true, una sola repetición consta de una iteración hacia adelante seguida de una iteración hacia atrás. En el siguiente ejemplo se establece el RepeatBehavior del DoubleAnimation del ejemplo anterior en un Count de dos. Como resultado, se DoubleAnimation reproduce durante 20 segundos: hacia delante durante cinco segundos, hacia atrás durante cinco segundos, hacia delante durante cinco segundos de nuevo y, a continuación, hacia atrás durante cinco segundos de nuevo.

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

Si una línea de tiempo de contenedor tiene objetos secundarios Timeline, estos se invierten cuando lo hace la línea de tiempo del contenedor. Para obtener ejemplos adicionales, vea Especificar si una línea de tiempo se invierte automáticamente.

La propiedad BeginTime

La BeginTime propiedad permite especificar cuándo se inicia una línea de tiempo. La hora de inicio de una escala de tiempo es relativa a su escala de tiempo primaria. Un tiempo de inicio de cero segundos significa que la línea de tiempo se inicia tan pronto como comienza la línea de tiempo principal; cualquier otro valor crea un desplazamiento entre cuando la línea de tiempo principal comienza a reproducirse y cuando se reproduce la línea de tiempo secundaria. Por ejemplo, un tiempo de inicio de dos segundos significa que la línea de tiempo comienza a funcionar cuando su elemento primario ha alcanzado un tiempo de dos segundos. De forma predeterminada, todas las escalas de tiempo tienen un tiempo de inicio de cero segundos. También puede establecer la hora de inicio de una escala de tiempo en null, lo que impide que se inicie la escala de tiempo. En WPF, especifique null mediante la extensión de marcado x:Null.

Tenga en cuenta que la hora de inicio no se aplica cada vez que se repite una escala de tiempo debido a su RepeatBehavior configuración. Si fueras a crear una animación con un BeginTime de 10 segundos y un RepeatBehavior de Forever, habría un retraso de 10 segundos antes de que la animación se reproducira por primera vez, pero no para cada repetición sucesiva. Sin embargo, si la escala de tiempo principal de la animación se reiniciara o repetira, se produciría el retraso de 10 segundos.

La BeginTime propiedad es útil para escalonar líneas de tiempo. En el ejemplo siguiente se crea un objeto Storyboard que tiene dos objetos secundarios DoubleAnimation . La primera animación tiene un Duration valor de cinco segundos y la segunda tiene un Duration valor de 3 segundos. En el ejemplo se establece el BeginTime valor del segundo DoubleAnimation en 5 segundos, de modo que comience a reproducirse después de que finalice 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>

La propiedad FillBehavior

Cuando un Timeline alcanza el final de su duración activa total, la FillBehavior propiedad especifica si detiene o mantiene su último valor. Una animación con un FillBehavior de HoldEnd "mantiene" su valor de salida: la propiedad animada conserva el último valor de la animación. Un valor de Stop hace que, tras finalizar, la animación deje de afectar a su propiedad de destino.

En el ejemplo siguiente se crea un objeto Storyboard que tiene dos objetos secundarios DoubleAnimation . Ambos DoubleAnimation objetos realizan la animación del Width de un Rectangle desde 0 hasta 100. Los Rectangle elementos tienen valores no animados Width de 500 [píxeles independientes del dispositivo].

• La FillBehavior propiedad del primero DoubleAnimation se establece en HoldEnd, el valor predeterminado. Como resultado, el ancho del rectángulo permanece en 100 después de que DoubleAnimation finalice.

• La FillBehavior propiedad del segundo DoubleAnimation se establece en Stop. Como resultado, el Width de la segunda 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 línea de tiempo

La Timeline clase proporciona tres propiedades para especificar su velocidad:

• SpeedRatio - Especifica la velocidad, respecto a su elemento primario, a la que progresa el tiempo de un Timeline. Los valores mayores que uno aumentan la velocidad de los Timeline objetos 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 línea de tiempo de contenedor afecta a todos sus objetos secundarios Timeline también.

• AccelerationRatio : especifica el porcentaje de la Duration de una línea de tiempo dedicado a acelerar. Para obtener un ejemplo, vea Cómo: Acelerar o Decelerar una animación.

• DecelerationRatio : especifica el porcentaje de Duration una escala de tiempo que se ha invertido en ralentizar. Para obtener un ejemplo, vea Cómo: Acelerar o Decelerar una animación.

Consulte también

• Visión general de animación
• Información general del sistema de animación y control de tiempo
• Información general sobre eventos de control de tiempo
• Temas de procedimiento
• Ejemplo de comportamiento de tiempo de animación