Compartilhar via

Visão geral dos comportamentos de tempo

  • Artigo

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

Pré-requisitos

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

Tipos de linha do tempo

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

As classes que herdam da classe linha do tempo fornecem funcionalidades adicionais, como animação e reprodução de mídia. WPF fornece os seguintes Timeline tipos.

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

Propriedades que controlam o comprimento de uma linha do tempo

A 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 diversos termos para descrever o comprimento de uma linha do tempo.

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

A propriedade Duration

Conforme mencionado anteriormente, uma linha do tempo representa um segmento de tempo. O comprimento desse segmento é determinado pelo Duration. 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 da linha do tempo é chamada pela sua duração simples, para distinguir entre a duração de uma única iteração e o comprimento total de tempo que a animação é reproduzida, incluindo repetições. Você pode especificar uma duração usando um valor de tempo finito ou os valores Automatic especiais ou Forever. A duração de uma animação deve ser resolvida para um TimeSpan valor, para que ela possa fazer a transição entre valores.

O exemplo a seguir mostra um DoubleAnimation com a 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 , o que significa que terminam automaticamente quando o último filho para de Automaticjogar. O exemplo a seguir mostra um Storyboard cujas Duration resoluções para cinco segundos, o período de tempo que leva todos os seus objetos filho DoubleAnimation para concluir.

<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 linha do tempo de um contêiner como um TimeSpan valor, você pode forçar a Duration reprodução por mais ou menos tempo do que seus objetos filho Timeline reproduziriam. Se você definir o para um valor menor que o comprimento dos objetos filho da linha do tempo do contêiner, os objetos filho TimelineTimeline pararão de ser reproduzidos quando a linha do tempo do contêiner o Duration fizer. O exemplo a seguir define o DurationStoryboard do dos exemplos anteriores como três segundos. Como resultado, o primeiro DoubleAnimation pára de progredir após três segundos, quando animou a largura do retângulo alvo para 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 RepeatBehavior propriedade de um Timeline controla quantas vezes ele repete sua duração simples. Usando a propriedade, você pode especificar quantas vezes a RepeatBehavior linha do tempo é reproduzida (uma iteração Count) ou o período total de tempo que ela deve ser reproduzida (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 completar a contagem ou 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 RepeatBehavior propriedade para fazer uma reprodução pelo dobro de sua duração simples, especificando uma DoubleAnimation contagem de iteração.

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

O próximo exemplo usa a propriedade para fazer a RepeatBehavior reprodução pela metade de DoubleAnimation sua 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 de a RepeatBehaviorTimeline para Forever, as Timeline repetições até serem interrompidas interativamente ou pelo sistema de temporização. O exemplo a seguir usa a propriedade para tornar a RepeatBehaviorDoubleAnimation reprodução indefinidamente.

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

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

A propriedade AutoReverse

A AutoReverse propriedade especifica se um Timeline será reproduzido para trás no final de cada iteração direta. O exemplo a seguir define a AutoReverse propriedade de a para true; como resultado, ele anima de zero a 100 e, em seguida, de 100 a DoubleAnimation 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 Count valor para especificar o RepeatBehavior de a Timeline e a AutoReverse propriedade de que Timeline é true, uma única repetição consiste em uma iteração direta seguida por uma iteração para trás. O exemplo a seguir define o RepeatBehaviorDoubleAnimation do do exemplo anterior como um Count de dois. Como resultado, o DoubleAnimation jogo é reproduzido por 20 segundos: para frente por cinco segundos, para trás por cinco segundos, para frente por 5 segundos novamente e depois 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 do contêiner tiver objetos filho Timeline , eles serão revertidos quando a linha do tempo do contêiner o fizer. Para obter exemplos adicionais, consulte Especificar se uma linha do tempo é revertida automaticamente.

A propriedade BeginTime

A BeginTime propriedade permite que você especifique quando uma linha do tempo é iniciada. A hora de início de uma linha do tempo é relativa à sua linha do tempo pai. 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 uma hora de início de zero segundos. Você também pode definir uma hora de início de uma linha do tempo como null, o que impede que a linha do tempo seja iniciada. No WPF, você especifica null usando a extensão de marcação x:Null.

Observe que a hora de início não é aplicada toda vez que uma linha do tempo se repete devido à sua RepeatBehavior configuração. Se você fosse criar uma animação com um de 10 segundos e um de , haveria um BeginTimeRepeatBehavior atraso de Forever10 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 da animação pai fosse reiniciada ou repetida, o atraso de 10 segundos ocorreria.

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

<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 FillBehavior propriedade especifica se ele pára ou mantém seu último valor. Uma animação com a de "mantém" seu valor de saída: a FillBehavior propriedade que está sendo animada HoldEnd retém o último valor da animação. Um valor de faz com que a animação pare de afetar sua propriedade de Stop destino após o término.

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

<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 Timeline classe fornece três propriedades para especificar sua velocidade:

Confira também