Partager via

Comment : définir une durée pour une animation

  • Article

Un Timeline représente un segment de temps et la longueur de ce segment est déterminée par le chronologie’s Duration. Lorsqu’un atteint Timeline la fin de sa durée, il cesse de jouer. Si l’enfant Timeline a des chronologie, ils arrêtent de jouer aussi bien. Dans le cas d’une animation, la Duration durée pendant laquelle l’animation passe de sa valeur de départ à sa valeur de fin.

Vous pouvez spécifier un Duration avec un temps spécifique, fini ou les valeurs Automatic spéciales ou Forever. La durée d’une animation doit toujours être une valeur de temps, car une animation doit toujours avoir une longueur définie et finie ; sinon, l’animation ne sait pas comment passer entre ses valeurs cibles. Les chronologie de conteneur (TimelineGroupobjets), tels que Storyboard et ParallelTimeline, ont une durée par défaut , Automaticce qui signifie qu’ils se terminent automatiquement lorsque leur dernier enfant cesse de jouer.

Dans l’exemple suivant, la largeur, la hauteur et la couleur de remplissage d’un Rectangle est animée. Les durées sont définies sur les chronologie d’animation et de conteneur, ce qui entraîne des effets d’animation, notamment le contrôle de la vitesse perçue d’une animation et la substitution de la durée des chronologie enfants par la durée d’un conteneur chronologie.

Exemple

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <StackPanel Margin="20">
  
    <Rectangle Width="100" Height="100" Name="myRectangle">
      <Rectangle.Fill>
        <SolidColorBrush x:Name="MyAnimatedBrush" Color="Black" />
      </Rectangle.Fill>
      <Rectangle.Triggers>
      
        <!-- Animates the rectangle fill to yellow and width to 300. -->
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>

            <!-- By default, TimelineGroup objects like Storyboard and ParallelTimeline have 
            a Duration of "Automatic". A TimelineGroup's automatic duration encompasses its 
            last-ending child. In this example, there is only one child of the Storyboard, the
            ParallelTimeline, so when the ParallelTimeline ends, the Storyboard duration will
            automatically end. -->
            <Storyboard>

              <!-- This ParallelTimeline has overriden its default duration of "Automatic" with
              a finite duration of half a second. This will force this Timeline to end after half a
              second even though its child Timelines have a longer duration (2 and 4 seconds respectively). 
              This cuts off the animation prematurely and the rectangle's fill will not go all the way to 
              yellow nor will the rectangle width get all the way to 300. Again, the default duration of a
              ParallelTimeline is "Automatic" so if you remove the finite duration, the ParallelTimeline
              will wait for its child timelines to end before it ends. -->

              <!-- Note: To specify a finite time in XAML, use the syntax of "days:hours:seconds". As mentioned,
              this ParallelTimeline has a duration of half a second. -->
              <ParallelTimeline Duration="0:0:0.5">

                <!-- For Animation Timelines like DoubleAnimation, the duration is one factor that
                determines the rate at which an animation appears to progress. For example, the DoubleAnimation
                below that animates the rectangle height will complete in only one second while the animation
                that animates the width willwill complete in 2 seconds which is relatively fast compared to the DoubleAnimation
                which animates the rectangle width over 4 seconds. -->
                <DoubleAnimation
                  Storyboard.TargetName="myRectangle"
                  Storyboard.TargetProperty="Height"
                  To="300" Duration="0:0:1" />

                <DoubleAnimation
                  Storyboard.TargetName="myRectangle"
                  Storyboard.TargetProperty="Width"
                  To="300" Duration="0:0:4" />

                <ColorAnimation
                  Storyboard.TargetName="MyAnimatedBrush"
                  Storyboard.TargetProperty="Color"
                  To="Yellow" Duration="0:0:2" />

              </ParallelTimeline>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
        
      </Rectangle.Triggers>
    </Rectangle>
  </StackPanel>
</Page>

Voir aussi