Procedura: ripetere un'animazione

In questo esempio viene illustrato come utilizzare la proprietà RepeatBehavior di un oggetto Timeline per controllare il comportamento di ripetizione di un'animazione.

Esempio

La proprietà RepeatBehavior di un oggetto Timeline controlla il numero di volte in cui la durata semplice di un'animazione viene ripetuta. Utilizzando RepeatBehavior, è possibile specificare che un oggetto Timeline deve essere ripetuto per un determinato numero di volte (un conteggio di iterazioni) o per un periodo di tempo specificato. In entrambi i casi, l'animazione viene eseguita dall'inizio alla fine per il numero di volte necessario per soddisfare il conteggio o la durata richiesta.

Per impostazione predefinita, le sequenze temporali prevedono un conteggio di ripetizioni pari a 1,0, il che significa che vengono riprodotte una sola volta e non vengono ripetute. Tuttavia, se si imposta la proprietà RepeatBehavior di un oggetto Timeline su Forever, la sequenza temporale viene ripetuta all'infinito.

Nell'esempio seguente viene illustrato come utilizzare la proprietà RepeatBehavior per controllare il comportamento di ripetizione di un'animazione. Viene animata la proprietà Width di cinque rettangoli, utilizzando per ognuno di essi un tipo diverso di comportamento di ripetizione.

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

Per l'esempio completo, vedere Esempio di comportamento temporale di un'animazione (la pagina potrebbe essere in inglese).

Vedere anche

Attività

Procedura: accumulare valori di animazione durante i cicli ripetuti

Procedura: specificare se una sequenza temporale viene automaticamente invertita o meno

Concetti

Cenni preliminari sull'animazione

Altre risorse

Procedure relative all'animazione e al sistema di temporizzazione

Animation and Timing

Esempio di comportamento temporale di un'animazione