Gewusst wie: Wiederholen einer Animation

Aktualisiert: November 2007

In diesem Beispiel wird die Verwendung der RepeatBehavior-Eigenschaft einer Timeline zur Steuerung des Wiederholungsverhaltens einer Animation beschrieben.

Beispiel

Die RepeatBehavior-Eigenschaft einer Timeline legt fest, wie oft eine Animation ihre einfache Dauer wiederholt. Mit RepeatBehavior können Sie für Timeline eine bestimmte Anzahl an Wiederholungen (Iterationszählung) oder Wiederholungen für eine bestimmte Dauer festlegen. In beiden Fällen wird die Animation so oft von Anfang bis Ende wiederholt, bis die Vorgaben für die Anzahl bzw. die Zeit der Wiederholungsläufe erfüllt sind.

Standardmäßig liegt die Anzahl der Wiederholungen für Zeitachsen bei 1,0, d. h. sie wird einmal durchlaufen und nicht wiederholt. Wenn Sie jedoch die RepeatBehavior-Eigenschaft einer Timeline auf Forever festlegen, wird die Zeitachse unbegrenzt wiederholt.

Im folgenden Beispiel wird die Verwendung der RepeatBehavior-Eigenschaft zur Steuerung des Wiederholungsverhaltens einer Animation beschrieben. Im Beispiel wird die Width-Eigenschaft durch fünf Rechtecke animiert, wobei für jedes Rechteck eine andere Art von Wiederholungsverhalten verwendet wird.

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

Das vollständige Beispiel finden Sie unter Beispiel zum Verhalten der Animationszeitsteuerung.

Siehe auch

Aufgaben

Gewusst wie: Sammeln von Animationswerten während Wiederholungszyklen

Gewusst wie: Angeben, ob die Wiedergaberichtung einer Zeitachse automatisch umgekehrt wird

Beispiel zum Verhalten der Animationszeitsteuerung

Konzepte

Übersicht über Animationen

Weitere Ressourcen

Gewusst-wie-Themen zu Animation und Zeitsteuerung

Animation und zeitliche Steuerung

Beispiele für Animationen und zeitliche Steuerung