Visão geral sobre comportamentos de temporização

Artigo
08/25/2010

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

Pré-requisitos

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

Tipos de Timelines

Uma Timeline representa um segmento de tempo. Ela fornece propriedades que permitem que você especifique o comprimento do segmento, quando ele deve ser iniciado, quantas vezes ele se repetirá, quão rápido o tempo progride no segmento e muito mais.

Classes que herdam da classe linha do tempo fornecem funcionalidade adicional, sistema autônomo a reprodução da animação e mídia. WPF oferece os seguintes Timeline tipos.

Tipo de Timeline	Descrição
AnimationTimeline	Classe abstrata base para objetos Timeline que geram valores de saída para animação de propriedades.
MediaTimeline	Gera saída de um arquivo de mídia.
ParallelTimeline	Um tipo de TimelineGroup que agrupa e controla objetos Timeline filhos.
Storyboard	Um tipo de ParallelTimeline que fornece informações de alvo para os objetos Timeline que contém.
Timeline	Classe abstrata base que define comportamentos de temporização.
TimelineGroup	Classe abstrata para objetos Timeline que podem conter outros objetos Timeline.

Propriedades que controlam o comprimento de uma Timeline

Uma Timeline representa um segmento de tempo, e o comprimento de uma linha de tempo pode ser descrito de maneiras diferentes. A tabela a seguir define diversos termos para descrever o comprimento de uma linha do tempo.

Termo	Descrição	Propriedades
Duração simples	O período de tempo que uma linha de tempo leva para realizar uma única iteração.	Duration
Uma repetição	O período de tempo que leva para uma linha de tempo tocar uma vez e, se a propriedade AutoReverse for verdadeira, tocar ao contrário uma vez.	Duration, AutoReverse
Período ativo	O período de tempo que leva para uma linha de tempo concluir todas as repetições especificadas por sua propriedade RepeatBehavior.	Duration, AutoReverse, RepeatBehavior

A Propriedade Duração

Como mencionado anteriormente, uma linha de tempo representa um segmento de tempo. O comprimento do segmento é determinado pela Duration da linha do tempo. Quando uma linha do tempo alcança o final de sua duração, sua execução é interrompida. Se a linha de tempo tiver outras linhas de tempo como suas filhas, suas execuções também são interrompidas. No caso de uma animação, a Duration especifica quanto tempo a animação leva para fazer a transição do seu valor inicial ao seu valor final. A duração de uma linha de tempo é às vezes chamada de duração simples, para distinguir entre a duração de uma única iteração e o comprimento total de tempo em que a animação é reproduzida incluindo-se as 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 em um valor TimeSpan, para que ela possa fazer a transição entre valores.

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

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

Contêineres de linhas de tempo tais como Storyboard e ParallelTimeline têm uma duração Automatic por padrão, o que significa que elas automaticamente terminam quando seu último filho termina de executar. O exemplo a seguir mostra um Storyboard cuja Duration é resolvida como cinco segundos, o período de tempo que leva para todos os seus objetos DoubleAnimation filhos terminarem de executar.

<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 a Duration de um contêiner de linhas de tempo como um valor TimeSpan, você pode forçar que sua execução demore mais ou menos que seus objetos Timeline filhos iriam demorar. Se você definir a Duration como um valor que seja menor do que o comprimento das linhas de tempo dos objetos Timeline filhos do contêiner, os objetos Timeline filhos vão interromper sua execução quando a linha de tempo do contêiner o fizer. O exemplo a seguir define a Duration do Storyboard dos exemplos anteriores como sendo de três segundos. Como resultado, a primeira DoubleAnimation para de progredir 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 uma Timeline controla quantas vezes ela repete sua duração simples. Usando a propriedade RepeatBehavior, você pode especificar quantas vezes a linha de tempo é reproduzida (uma Count de iteração) ou o comprimento total de tempo em que ela deve ser executada (uma Duration de repetição). Em ambos casos, a animação roda do começo ao fim quantas vezes for necessário para completar a contagem ou duração requisitada. Por padrão, linhas de tempo têm uma contagem de iteração de 1.0, o que significa que elas tocam uma vez e não se repetem.

O exemplo a seguir usa a propriedade RepeatBehavior para fazer uma DoubleAnimation ser executada durante o dobro de sua duração simples através da especificação da 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 a DoubleAnimation ser executada por meia duração simples.

<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 uma Timeline como Forever, a Timeline se repete até ser interrompida de forma interativa ou pelo sistema de temporização. O exemplo a seguir usa a propriedade RepeatBehavior para fazer a DoubleAnimation ser reproduzida indefinidamente.

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

Para um exemplo adicional, consulte Como: Repetir uma animação.

A propriedade AutoReverse

A propriedade AutoReverse especifica se uma Timeline será executada ao contrário ao final da cada iteração direta. O exemplo a seguir define a propriedade AutoReverse de uma DoubleAnimation como true; como resultado, ela irá 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 uma Timeline e a propriedade AutoReverse da Timeline é true, uma única repetição consiste em uma interação para a frente seguida por uma iteração ao contrário. O exemplo a seguir define o RepeatBehavior da DoubleAnimation do exemplo anterior como um Count de dois. sistema autônomo resultado, a DoubleAnimation Reproduz por 20 segundos: Encaminhar para cinco segundos, para trás por cinco segundos, encaminhar 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 um contêiner de linhas de tempo tiver objetos Timeline filhos, eles são revertidos quando a linha de tempo contêiner o for. Para exemplos adicionais, consulte Como: Specify Whether a Timeline Automatically Reverses.

A propriedade BeginTime

A propriedade BeginTime permite que você especifique quando uma linha de tempo é iniciada. O momento de início de uma linha de tempo é relativo a sua linha de tempo pai. Um momento inicial de zero segundos significa que a linha de tempo se inicia assim que a linha pai é iniciada; qualquer outro valor cria um deslocamento de tempo entre quando a linha de tempo pai se inicia e quando a linha de tempo filha começa. Por exemplo, um momento inicial de dois segundos significa que a linha de tempo começa sua execução quando seu pai atingiu um tempo de dois segundos. Por padrão, todas as linhas de tempo têm um momento inicial de zero segundos. Você também pode definir o momento de início de uma linha de tempo como null, o que impede que a linha de tempo seja iniciada. No WPF, você especifica null usando a Extensão de linguagem de marcação x:NULL.

Observe que o tempo inicial não é aplicado sempre que uma linha de tempo se repete por causa de sua configuração de RepeatBehavior. Se você tivesse que criar uma animação com um BeginTime de 10 segundos e um RepeatBehavior Forever, haveria um atraso de 10 segundos antes da animação ser executada pela primeira vez, mas não para cada repetição sucessiva. No entanto, se a animação da linha de tempo pai fosse reiniciada ou repetida, o atraso de 10 segundos ocorreria.

A propriedade BeginTime é útil para encadear linhas de tempo. O exemplo a seguir cria um Storyboard que possui dois objetos DoubleAnimation filhos. A primeira animação tem uma Duration de cinco segundos, e a segunda tem uma Duration de 3 segundos. O exemplo define BeginTime da segunda DoubleAnimation como 5 segundos, para que ela comece a ser executada após a primeira DoubleAnimation terminar.

<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 uma Timeline atingir o final de sua duração total ativa, a propriedade FillBehavior especifica se ela para ou se mantém seu último valor. Uma animação com um FillBehavior de HoldEnd"mantém" seu valor de saída: a propriedade ser animada retém o último valor da animação. Um valor Stop faz com que que a animação pare de afetar sua propriedade alvo após seu término.

O exemplo a seguir cria um Storyboard que possui dois objetos DoubleAnimation filhos. Ambos os DoubleAnimation Animar objetos a Width de um Rectangle de 0 a 100. The Rectangle elementos têm sem animação Width valores de 500 pixels independentes de dispositivo.

A propriedade FillBehavior da primeira DoubleAnimation é definida como HoldEnd, o valor padrão. Como resultado, a largura do retângulo permanece em 100 após a DoubleAnimation terminar.
A propriedade FillBehavior da segunda DoubleAnimation é definida como Stop. Como resultado, a Width do segundo Rectangle volta para 500 após a DoubleAnimation terminar.

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

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

SpeedRatio – Especifica a taxa, em relação à linha pai, na qual progride o tempo para uma Timeline. Valores maiores do que um aumentam a velocidade da Timeline e de seus objetos Timeline filhos; valores entre zero e um diminuem a velocidade. Um valor de 1 indica que a Timeline progride com a mesma taxa da linha pai. A configuração de SpeedRatio de uma linha de tempo contêiner afeta todos os seus objetos Timeline filhos.
AccelerationRatio – Especifica a porcentagem da Duration de uma linha de tempo gasta acelerando. Para um exemplo, consulte Como: Acelerar ou desacelerar uma animação.
DecelerationRatio – Especifica a porcentagem da Duration de uma linha de tempo gasta desacelerando. Para um exemplo, consulte Como: Acelerar ou desacelerar uma animação.

Consulte também

Compartilhar via