Angeben, ob eine Zeitachse automatisch umgekehrt wird

Die AutoReverse-Eigenschaft einer Zeitachse bestimmt, ob sie umgekehrt wiedergegeben wird, nachdem sie eine Vorwärtsiteration abgeschlossen hat. Das folgende Beispiel zeigt mehrere Animationen mit identischer Dauer und identischen Zielwerten, jedoch mit unterschiedlichen AutoReverse-Einstellungen. Um zu veranschaulichen, wie sich die AutoReverse-Eigenschaft mit unterschiedlichen RepeatBehavior-Einstellungen verhält, werden einige Animationen so festgelegt, dass sie wiederholt werden. Die letzte Animation zeigt, wie die AutoReverse-Eigenschaft auf geschachtelten Zeitachsen funktioniert.

Beispiel

<!-- AutoReverseExample.xaml
     This example shows how to use the AutoReverse property to make a timeline 
     play backwards at the end of each iteration. 
     Several rectangles are animated by DoubleAnimations with 
     identical durations and target values, but with different
     AutoReverse and RepeatBehavior settings.-->
     
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="AutoReverse Example">
  <StackPanel Margin="20">

    <!-- Create some rectangles to animate. -->
    <Rectangle Name="withoutAutoReverseRectangle"
      Width="100" Height="20" Fill="Blue" />  

    <Rectangle Name="autoReverseRectangle"
      Width="100" Height="20" Fill="Blue" />

    <Rectangle Name="autoReverseRectangleWithRepeats"
      Width="100" Height="20" Fill="Blue" />

    <Rectangle Name="complexAutoReverseExample"
      Width="100" Height="20" Fill="Blue"  />

    <!-- Use a button to restart the animations. -->
    <Button Margin="30" Content="Start Animations">
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>

              <!-- Create an animation that does not automatically play in reverse.
                   This animation plays for a total of 2 seconds. -->
              <DoubleAnimation 
                Storyboard.TargetName="withoutAutoReverseRectangle" 
                Storyboard.TargetProperty="Width" 
                Duration="0:0:2" From="100" To="400" AutoReverse="False" />   

              <!-- Create an animation that automatically reverses at the end of each iteration.
                   This animation plays for a total of 4 seconds. -->
              <DoubleAnimation Storyboard.TargetName="autoReverseRectangle" 
                Storyboard.TargetProperty="Width"
                Duration="0:0:2" From="100" To="400" AutoReverse="True" />
        
              <!-- Create an animation that automatically reverses at the end of each iteration.
                   Set the animation to repeat twice. As a result, then animation plays forward,
                   the backward, then forward, and then backward again. 
                   This animation plays for a total of 8 seconds. -->
              <DoubleAnimation Storyboard.TargetName="autoReverseRectangleWithRepeats" 
                Storyboard.TargetProperty="Width"
                Duration="0:0:2" From="100" To="400" AutoReverse="True" RepeatBehavior="2x" />  
                
              <!-- Set the parent timeline's AutoReverse property to True and set the animation's
                   RepeatBehavior to 2x. As a result, the animation plays forward twice and then
                   backwards twice. 
                   This animation plays for a total of 8 seconds. -->                
              <ParallelTimeline AutoReverse="True">
                <DoubleAnimation 
                  Storyboard.TargetName="complexAutoReverseExample" 
                  Storyboard.TargetProperty="Width"
                  Duration="0:0:2" From="100" To="400" RepeatBehavior="2x"  />  
              </ParallelTimeline>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </StackPanel>
</Page>