Visão geral dos comportamentos de tempo

Este tópico descreve os comportamentos de tempo de animações e outros objetos Timeline.

Pré-requisitos

Para entender este tópico, você deve estar familiarizado com os recursos básicos de animação. Para obter mais informações, consulte a Visão geral de animação.

Tipos de linha do tempo

Um Timeline representa um segmento de tempo. Ele fornece propriedades que permitem que você especifique o comprimento desse segmento, quando ele deve ser iniciado, quantas vezes ele será repetido, quão rápido o tempo progride nesse segmento e muito mais.

Classes que herdam da classe de linha do tempo fornecem funcionalidade adicional, como animação e reprodução de mídia. O WPF fornece os seguintes tipos de Timeline.

Propriedades que controlam o comprimento de uma linha do tempo

Um Timeline representa um segmento de tempo e o comprimento de uma linha do tempo pode ser descrito de maneiras diferentes. A tabela a seguir define vários termos para descrever o comprimento de uma linha do tempo.

A propriedade Duration

Como mencionado anteriormente, uma linha do tempo representa um segmento de tempo. O comprimento desse segmento é determinado pelo Durationda linha do tempo. Quando uma linha de tempo alcança o final de sua duração, sua execução é interrompida. Se a linha do tempo tiver linhas do tempo filho, a execução delas também será interrompida. 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. Às vezes, a duração de uma linha do tempo é chamada de duração simples, para distinguir entre a duração de apenas uma iteração e a duração total em que a animação é reproduzida, incluindo repetições. Você pode especificar uma duração usando um valor de tempo finito ou os valores especiais Automatic ou Forever. A duração de uma animação deve ser resolvida para um valor TimeSpan, para que possa fazer a transição entre valores.

O exemplo a seguir mostra um DoubleAnimation com uma Duration de cinco segundos.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5"  />

As linhas do tempo do contêiner, como Storyboard e ParallelTimeline, têm uma duração padrão de Automatic, o que significa que terminam automaticamente quando a reprodução do último filho termina. O exemplo a seguir mostra um Storyboard cuja Duration é resolvida para cinco segundos, o período de tempo que leva para todos os objetos DoubleAnimation filhos dela serem concluídos.

<Storyboard >

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

Ao definir o Duration de uma linha do tempo de contêiner como um valor TimeSpan, você pode forçar a reprodução por mais tempo ou por menos tempo do que aquele pelo qual os objetos filho Timeline seriam reproduzidos. Se você definir a Duration para um valor menor que o comprimento dos objetos filho Timeline da linha do tempo do contêiner, os objetos filho Timeline interromperão a reprodução quando o mesmo ocorrer com a linha do tempo do contêiner. O exemplo a seguir define o Duration do Storyboard dos exemplos anteriores como três segundos. Como resultado, a primeira DoubleAnimation interrompe o progresso após três segundos, quando ela tiver animado a largura do retângulo alvo até 60.

<Storyboard Duration="0:0:3">

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

A propriedade RepeatBehavior

A propriedade RepeatBehavior de um Timeline controla quantas vezes a duração simples dele é repetida. Usando a propriedade RepeatBehavior, você pode especificar quantas vezes a linha do tempo é reproduzida (uma iteração Count) ou o tempo total que deve ser reproduzido (uma repetição Duration). Em ambos os casos, a animação passa por quantas execuções do início ao fim forem necessárias para preencher a contagem ou a duração solicitada. Por padrão, as linhas do tempo têm uma contagem de iterações de 1.0, o que significa que elas são reproduzidas uma vez e não se repetem.

O exemplo a seguir usa a propriedade RepeatBehavior para fazer um DoubleAnimation reproduzir por duas vezes a duração simples dele especificando uma contagem de iterações.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2x" />

O exemplo a seguir usa a propriedade RepeatBehavior para fazer o DoubleAnimation reproduzir pela metade da duração simples dele.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="0.5x" />

Se você definir a propriedade RepeatBehavior de um Timeline como Forever, o Timeline será repetido até ser interrompido interativamente ou pelo sistema de temporização. O exemplo a seguir usa a propriedade RepeatBehavior para fazer a DoubleAnimation tocar indefinidamente.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="Forever" />

Para obter um exemplo adicional, consulte Repetição de uma animação.

A propriedade AutoReverse

A propriedade AutoReverse especifica se uma Timeline será reproduzida no sentido reverso ao término de cada iteração para frente. O exemplo a seguir define a propriedade AutoReverse de uma DoubleAnimation como true; como resultado, ela anima de zero a 100 e, em seguida, de 100 a zero. Ela será executada por um total de 10 segundos.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  AutoReverse="True" />

Quando você usa um valor Count para especificar o RepeatBehavior de um Timeline e a propriedade AutoReverse desse Timeline é true, uma repetição única consiste em uma iteração para frente seguida de uma iteração para trás. O exemplo a seguir define o RepeatBehavior do DoubleAnimation do exemplo anterior como um Count de dois. Como resultado, o DoubleAnimation joga por 20 segundos: para frente por cinco segundos, para trás por cinco segundos, para frente por 5 segundos novamente e, em seguida, para trás por cinco segundos.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2" 
  AutoReverse="True" />

Se uma linha do tempo de contêiner tiver objetos filho Timeline, eles serão reproduzidos no sentido reverso quando o mesmo ocorrer com a linha do tempo do contêiner. Para obter exemplos adicionais, consulte Especificar se uma linha do tempo inverte automaticamente.

A propriedade BeginTime

A propriedade BeginTime permite que você especifique quando uma linha do tempo é iniciada. O tempo de início de uma linha do tempo é relativo à sua linha do tempo principal. Uma hora de início de zero segundos significa que a linha do tempo se inicia assim que o pai iniciar. Qualquer outro valor cria um deslocamento entre o momento em que a linha do tempo pai inicia a execução e o momento em que a linha do tempo filho é executada. Por exemplo, uma hora de início de dois segundos significa que a linha do tempo começa sua execução quando sua linha do tempo pai atinge um tempo de dois segundos. Por padrão, todas as linhas do tempo têm um tempo de início de zero segundos. Você também pode definir a hora de início de uma linha do tempo para null, o que impede que a linha do tempo seja iniciada. No WPF, você especifica nulo usando a Extensão de Marcação x:Null .

Observe que o horário de início não é aplicado a cada repetição da linha do tempo por causa da configuração RepeatBehavior. Se você criasse uma animação com um BeginTime de 10 segundos e um RepeatBehavior de Forever, haveria um atraso de 10 segundos antes da animação ser reproduzida pela primeira vez, mas não para cada repetição sucessiva. No entanto, se a linha do tempo principal da animação fosse reiniciada ou repetida, haveria um atraso de 10 segundos.

A propriedade BeginTime é útil para escalonar linhas do tempo. O exemplo a seguir cria um Storyboard que tem dois objetos filho DoubleAnimation. A primeira animação tem uma Duration de cinco segundos e a segunda tem um Duration de 3 segundos. O exemplo define o BeginTime do segundo DoubleAnimation como cinco segundos, para que comece a ser reproduzido após o término do primeiro DoubleAnimation.

<Storyboard>

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5" 
    BeginTime="0:0:0" />


  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  
    BeginTime="0:0:5" />

</Storyboard>

A propriedade FillBehavior

Quando um Timeline atinge o final de sua duração ativa total, a propriedade FillBehavior especifica se ele para ou mantém seu último valor. Uma animação com um FillBehavior de HoldEnd "mantém" o valor de saída dela: a propriedade que está sendo animada mantém o último valor da animação. Um valor de Stop faz com que a animação pare de afetar sua propriedade de destino após o término.

O exemplo a seguir cria um Storyboard que tem dois objetos filho DoubleAnimation. Ambos os objetos DoubleAnimation animam o Width de um Rectangle de 0 a 100. Os elementos Rectangle têm valores de Width não animados de 500 [pixels independentes do dispositivo].

• A propriedade FillBehavior do primeiro DoubleAnimation é definida como HoldEnd, o valor padrão. Como resultado, a largura do retângulo permanece em 100 após o término do DoubleAnimation.

• A propriedade FillBehavior do segundo DoubleAnimation está definida como Stop. Como resultado, o Width do segundo Rectangle é revertido para 500 após o término do DoubleAnimation.

<Rectangle Name="MyRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Red">
</Rectangle>

<Rectangle Name="MyOtherRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Orange">
</Rectangle>

<Button Content="Start FillBehavior Example">
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5" 
            FillBehavior="HoldEnd" />
          <DoubleAnimation 
            Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5"  
            FillBehavior="Stop" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

Propriedades que controlam a velocidade de uma linha do tempo

A classe Timeline fornece três propriedades para especificar sua velocidade:

• SpeedRatio – especifica essa taxa, em relação ao pai dela, em que o tempo progride para um Timeline. Valores maiores que um aumentam a velocidade do Timeline e seus objetos Timeline filho; valores entre zero e um reduzem a velocidade. Um valor de um indica que Timeline progride na mesma taxa que o pai dela. A configuração SpeedRatio de uma linha do tempo de contêiner também afeta todos os objetos filho Timeline.

• AccelerationRatio – especifica a porcentagem do Duration de uma linha do tempo transcorrido acelerando. Para obter um exemplo, consulte Como: Acelerar ou Desacelerar uma Animação.

• DecelerationRatio - Especifica o percentual do Duration de uma linha do tempo transcorrido desacelerando. Para obter um exemplo, consulte Como: Acelerar ou Desacelerar uma Animação.

Consulte também

• Visão geral da animação
• Visão geral do sistema de temporização e animação
• Visão geral de eventos de tempo
• Tópicos "Como Fazer"
• Amostra de comportamento de tempo da animação