Compartilhar via

Como definir uma duração para uma animação

  • Artigo

Um Timeline representa um segmento de tempo e o comprimento desse segmento é determinado pelo Durationda linha do tempo. Quando um Timeline atinge o fim de sua duração, para de tocar. Se o Timeline tem linhas do tempo filho, eles param de brincar também. No caso de uma animação, o Duration especifica quanto tempo a animação leva para fazer a transição de seu valor inicial para seu valor final.

Você pode especificar um Duration com um horário específico e finito ou os valores especiais Automatic ou Forever. A duração de uma animação deve sempre ser um valor de tempo, pois uma animação deve sempre ter um comprimento definido e finito; caso contrário, a animação não saberia como fazer a transição entre seus valores de destino. As linhas do tempo do contêiner (objetosTimelineGroup), como Storyboard e ParallelTimeline, têm uma duração padrão de Automatic, o que significa que terminam automaticamente quando seu último filho para de brincar.

No exemplo a seguir, são animados a largura, a altura e a cor de preenchimento de um Rectangle. As durações são definidas em linhas do tempo de animação e contêiner, resultando em efeitos de animação, incluindo controlar a velocidade percebida de uma animação e substituir a duração das linhas do tempo filho com a duração de uma linha do tempo de contêiner.

Exemplo

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

Consulte também