Comment indiquer si une chronologie s’inverse automatiquement

La propriété AutoReverse d’une chronologie détermine si elle joue à l’inverse une fois qu’elle a terminé une itération vers l’avant. L’exemple suivant montre plusieurs animations avec des valeurs de durée et de cible identiques, mais avec des paramètres de AutoReverse différents. Pour montrer comment la propriété AutoReverse se comporte avec différents paramètres de RepeatBehavior, certaines animations sont définies pour se répéter. La dernière animation montre comment fonctionne la propriété AutoReverse sur les chronologies imbriquées.

Exemple

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