Compartir a través de


Cómo: Repetir una animación

Actualización: noviembre 2007

En este ejemplo se muestra cómo utilizar la propiedad RepeatBehavior de un objeto Timeline para controlar el comportamiento de repetición de una animación.

Ejemplo

La propiedad RepeatBehavior de un objeto Timeline controla cuántas veces repite una animación su duración simple. Utilizando RepeatBehavior, puede especificar que un objeto Timeline se repita un cierto número de veces (un número de iteraciones) o durante un período de tiempo especificado. En cualquier caso, la animación pasa por tantas repeticiones de principio a fin como sea necesario necesita para rellenar el recuento o la duración solicitados.

De forma predeterminada, las escalas de tiempo tienen una cuenta de repeticiones de 1,0, lo que significa que se reproducen una vez y no se repiten. Sin embargo, si establece la propiedad RepeatBehavior de un objeto Timeline en Forever, la escala de tiempo se repetirá indefinidamente.

En el ejemplo siguiente se muestra cómo utilizar la propiedad RepeatBehavior para controlar el comportamiento de repetición de una animación. El ejemplo anima la propiedad Width de cinco rectángulos, cada uno de los cuales utiliza un tipo diferente de comportamiento de repetición.

<!-- RepeatBehaviorExample.xaml
     This example shows how to use the RepeatBehavior property to make a timeline repeat. -->
<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="RepeatBehavior Example">

  <Border HorizontalAlignment="Stretch">
    <StackPanel Margin="20">

      <!-- Create several rectangles to animate. -->
      <Rectangle Name="ForeverRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />
      <Rectangle Name="FourSecondsRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />
      <Rectangle Name="TwiceRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />
      <Rectangle Name="HalfRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />
      <Rectangle Name="OneSecondRepeatingRectangle" 
        Fill="Orange" Width="50" Height="20" />


      <!-- Create buttons to restart and stop the animations. -->
      <StackPanel Orientation="Horizontal" Margin="0,20,0,0">
        <Button Name="restartButton">Start Animations</Button>
        <Button Name="stopButton" Background="#669900FF">Stop</Button>

        <StackPanel.Triggers>
          <EventTrigger SourceName="restartButton" RoutedEvent="Button.Click">
            <BeginStoryboard Name="myBeginStoryboard">
              <Storyboard>

                <!-- Create an animation that repeats indefinitely. -->
                <DoubleAnimation 
                  Storyboard.TargetName="ForeverRepeatingRectangle" 
                  Storyboard.TargetProperty="Width" 
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="Forever" />

                <!-- Create an animation that repeats for four seconds. As a result, the
                     animation repeats twice. -->          
                <DoubleAnimation 
                  Storyboard.TargetName="FourSecondsRepeatingRectangle" 
                  Storyboard.TargetProperty="Width"
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="0:0:4" />

                <!-- Create an animation that repeats twice. -->
                <DoubleAnimation 
                  Storyboard.TargetName="TwiceRepeatingRectangle" 
                  Storyboard.TargetProperty="Width" 
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="2x" />     

                <!-- Create an animation that repeats 0.5 times. The resulting animation
                     plays for one second, half of its Duration. It animates from 50 to 150. -->
                <DoubleAnimation 
                  Storyboard.TargetName="HalfRepeatingRectangle" 
                  Storyboard.TargetProperty="Width" 
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="0.5x" />

                <!-- Create an animation that repeats for one second. The resulting animation
                     plays for one second, half of its Duration. It animates from 50 to 150. -->
                <DoubleAnimation 
                  Storyboard.TargetName="OneSecondRepeatingRectangle" 
                  Storyboard.TargetProperty="Width" 
                  From="50" To="300" Duration="0:0:2" RepeatBehavior="0:0:1" />          
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>        
          <EventTrigger SourceName="stopButton" RoutedEvent="Button.Click">
            <StopStoryboard BeginStoryboardName="myBeginStoryboard" />
          </EventTrigger>
        </StackPanel.Triggers>
      </StackPanel>
    </StackPanel>
  </Border>
</Page>

Para obtener el ejemplo completo, vea Ejemplo Animation Timing Behavior.

Vea también

Tareas

Cómo: Acumular valores de animaciones durante la repetición de ciclos

Cómo: Especificar si una escala de tiempo se invierte automáticamente

Ejemplo Animation Timing Behavior

Conceptos

Información general sobre animaciones

Otros recursos

Temas "Cómo..." de animación y control de tiempo

Animación y temporización

Ejemplos Animation and Timing