Este artigo foi traduzido por máquina. Para visualizar o arquivo em inglês, marque a caixa de seleção Inglês. Você também pode exibir o texto Em inglês em uma janela pop-up, movendo o ponteiro do mouse sobre o texto.
Tradução
Inglês

Visão geral de animações de quadro-chave

 

Publicado: junho de 2016

Este tópico apresenta animações de quadro-chave. Animações de quadro chave permitem que você anime usando mais de dois valores de destino e controlam o método de interpolação de uma animação.

Para entender esta visão geral, você deve estar familiarizado com Windows Presentation Foundation (WPF) animações e linhas do tempo. Para uma introdução a animação, consulte o Visão geral da animação. Ele também ajuda estar familiarizado com animações de/para/por. Para obter mais informações, consulte o Visão geral de animações de-para-por.

Como um de/para/por animação, uma animação de quadro chave anima o valor de uma propriedade de destino. Ela cria uma transição entre seus valores alvo por suas Duration. No entanto, enquanto um de/para/por animação cria uma transição entre dois valores, uma única animação de quadro chave pode criar transições entre qualquer número de valores de destino. Ao contrário de um de/para/por animação, uma animação de quadro-chave não tem nenhum From, To ou By propriedades com as quais definir seus valores de destino. Valores de destino de uma animação quadro-chave são descritas usando objetos de quadros-chave (portanto, o termo, "animação de quadro-chave"). Para especificar valores de destino da animação, você cria objetos quadro chave e adicioná-los para a animação KeyFrames coleção. Quando a animação é executada, ela faz a transição entre os quadros que você especificou.

Além de oferecer suporte a vários valores alvo, alguns métodos de quadro-chave até mesmo oferecem suporte a vários métodos de interpolação. Método de interpolação de uma animação define como ela faz a transição de um valor para a próxima. Há três tipos de interpolações: discretos, linear, e por spline.

Para animar com uma animação de quadro-chave, você deve concluir as etapas a seguir.

  • Declare a animação e especifique sua Duration, exatamente como você faria para uma animação de/para/por.

  • Para cada valor de destino, crie um quadro chave do tipo apropriado, defina seu valor e KeyTime, e adicione-à animação KeyFrames coleção.

  • Associar a animação uma propriedade, exatamente como faria com um de/para/por animação. Para obter mais informações sobre como aplicar uma animação a uma propriedade usando um storyboard, consulte Visão geral de storyboards.

O exemplo a seguir usa um DoubleAnimationUsingKeyFrames para animar um Rectangle elemento para quatro locais diferentes.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
  WindowTitle="KeyFrame Animations">

  <Border Width="400" BorderBrush="Black">  

    <Rectangle Fill="Blue" 
      Width="50" Height="50"
      HorizontalAlignment="Left">
      <Rectangle.RenderTransform>
        <TranslateTransform 
          x:Name="MyAnimatedTranslateTransform" 
          X="0" Y="0" />
      </Rectangle.RenderTransform>
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animate the TranslateTransform's X property
                   from 0 to 350, then 50,
                   then 200 over 10 seconds. -->

              <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="MyAnimatedTranslateTransform"
                Storyboard.TargetProperty="X"
                Duration="0:0:10">
                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
                <LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
                <LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
                <LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />                          
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers> 
    </Rectangle>
  </Border> 
</Page>

Como um de/para/por animação, uma animação de quadro-chave pode ser aplicada a uma propriedade usando um Storyboard na marcação e código, ou usando o BeginAnimation método no código. Você também pode usar uma animação de quadro-chave para criar um AnimationClock e aplicá-la a uma ou mais propriedades. Para obter mais informações sobre os diferentes métodos para aplicar as animações, consulte o Visão geral das técnicas de animação de propriedade.

Como animações geram valores de propriedade, existem diferentes tipos de animação para tipos diferentes de propriedades. Para animar uma propriedade que utiliza um Double (como um elemento Width propriedade), use uma animação que produz Double valores. Para animar uma propriedade que utiliza um Point, use uma animação que produz Point valores e assim por diante.

As classes de animação de quadro chave pertencem ao System.Windows.Media.Animation namespace e de acordo com a seguinte convenção de nomenclatura:

< tipo >AnimationUsingKeyFrames

Onde < tipo > é o tipo de valor que a classe anima.

WPF Fornece as seguintes classes de animação de quadro-chave.

Tipo da Propriedade

Classe de animação de/para/por correspondente

Métodos de interpolação suportados

Boolean

BooleanAnimationUsingKeyFrames

Discretos

Byte

ByteAnimationUsingKeyFrames

Discretos, Linear, por spline

Color

ColorAnimationUsingKeyFrames

Discretos, Linear, por spline

Decimal

DecimalAnimationUsingKeyFrames

Discretos, Linear, por spline

Double

DoubleAnimationUsingKeyFrames

Discretos, Linear, por spline

Int16

Int16AnimationUsingKeyFrames

Discretos, Linear, por spline

Int32

Int32AnimationUsingKeyFrames

Discretos, Linear, por spline

Int64

Int64AnimationUsingKeyFrames

Discretos, Linear, por spline

Matrix

MatrixAnimationUsingKeyFrames

Discretos

Object

ObjectAnimationUsingKeyFrames

Discretos

Point

PointAnimationUsingKeyFrames

Discretos, Linear, por spline

Quaternion

QuaternionAnimationUsingKeyFrames

Discretos, Linear, por spline

Rect

RectAnimationUsingKeyFrames

Discretos, Linear, por spline

Rotation3D

Rotation3DAnimationUsingKeyFrames

Discretos, Linear, por spline

Single

SingleAnimationUsingKeyFrames

Discretos, Linear, por spline

String

StringAnimationUsingKeyFrames

Discretos

Size

SizeAnimationUsingKeyFrames

Discretos, Linear, por spline

Thickness

ThicknessAnimationUsingKeyFrames

Discretos, Linear, por spline

Vector3D

Vector3DAnimationUsingKeyFrames

Discretos, Linear, por spline

Vector

VectorAnimationUsingKeyFrames

Discretos, Linear, por spline

Assim como há tipos diferentes de animações de quadro-chave para animar tipos diferentes de propriedades, também existem diferentes tipos de objetos quadro chave: um para cada tipo de valor animado e método de interpolação suportado. Tipos de quadro chave aderem a seguinte convenção de nomenclatura:

< InterpolationMethod >< tipo >KeyFrame

Onde < InterpolationMethod > é o método de interpolação que o quadro chave usa e < tipo > é o tipo de valor que a classe anima. Uma animação de quadro-chave que oferece suporte a todos os três métodos de interpolação terá três tipos de quadro-chave que você pode usar. Por exemplo, você pode usar três tipos de quadro-chave com um DoubleAnimationUsingKeyFrames: DiscreteDoubleKeyFrame, LinearDoubleKeyFrame, e SplineDoubleKeyFrame. (Os métodos de interpolação são descritos em detalhes em uma seção posterior.)

O objetivo principal de um quadro chave é especificar um KeyTime e um Value. Cada tipo de quadro chave fornece essas duas propriedades.

  • O Value propriedade especifica o valor alvo para o quadro chave.

  • O KeyTime propriedade especifica quando (dentro da animação Duration) um quadro chave Value for atingido.

Quando uma animação de quadro chave começa, itera através de seus quadros chave na ordem definida por suas KeyTime Propriedades.

  • Se não houver nenhum quadro chave com momento 0, a animação cria uma transição entre o valor atual da propriedade de destino e o Value do primeiro quadro chave; caso contrário, a saída da animação valor torna-se o valor do primeiro quadro chave.

  • A animação cria uma transição entre o Value do primeiro e do segundo quadros chave usando o método de interpolação especificado pelo segundo quadro chave. A transição começa com o primeiro quadro chave KeyTime e termina quando o segundo quadro chave KeyTime for atingido.

  • A animação continua, criando as transições entre cada quadro chave subseqüente e seu quadro chave anterior.

  • Finalmente, a animação faz a transição para o valor do quadro-chave com o maior momento chave que é igual ou menor do que a animação Duration.

Se a animação Duration é Automatic ou seu Duration é igual ao momento do último quadro chave, a animação termina. Caso contrário, se a animação Duration é maior do que o momento chave do último quadro chave, a animação mantém o valor do quadro chave até atinge o final do seu Duration. Como todas as animações, uma animação de quadro chave usa seu FillBehavior propriedade para determinar se ela mantém o valor final quando atingir o final do seu período ativo. Para obter mais informações, consulte o Visão geral dos comportamentos de tempo.

O exemplo a seguir usa o DoubleAnimationUsingKeyFrames objeto definido no exemplo anterior para demonstrar como o Value e KeyTime Propriedades de trabalho.

  • O primeiro quadro chave imediatamente define o valor de saída da animação como 0.

  • O segundo quadro chave anima de 0 a 350. Ele se inicia após o primeiro quadro chave terminar (momento = 0 segundos) e é reproduzido por 2 segundos, finalizando no momento = 0:0:2.

  • O terceiro quadro chave anima de 350 a 50. Ele se inicia quando o segundo quadro chave termina (momento = 2 segundos) e é reproduzido por 5 segundos, finalizando no momento = 0:0:7.

  • O quarto quadro chave anima de 50 a 200. Ele se inicia quando o terceiro quadro chave terminar (momento = 7 segundos) e é reproduzido por 1 segundo, finalizando no momento = 0:0:8.

  • Porque o Duration da animação foi definida como 10 segundos, a animação mantém o valor final por dois segundos antes de terminar no momento = 0:0:10.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
  WindowTitle="KeyFrame Animations">

  <Border Width="400" BorderBrush="Black">  

    <Rectangle Fill="Blue" 
      Width="50" Height="50"
      HorizontalAlignment="Left">
      <Rectangle.RenderTransform>
        <TranslateTransform 
          x:Name="MyAnimatedTranslateTransform" 
          X="0" Y="0" />
      </Rectangle.RenderTransform>
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animate the TranslateTransform's X property
                   from 0 to 350, then 50,
                   then 200 over 10 seconds. -->

              <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="MyAnimatedTranslateTransform"
                Storyboard.TargetProperty="X"
                Duration="0:0:10">
                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
                <LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
                <LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
                <LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />                          
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers> 
    </Rectangle>
  </Border> 
</Page>

As seções anteriores mencionaram que algumas animações de quadro-chave oferecer suporte a vários métodos de interpolação. Interpolação uma animação de descreve como uma animação faz a transição entre valores ao longo de sua duração. Selecionando o tipo de quadro chave você usa na sua animação, você pode definir o método de interpolação para aquele segmento de quadro-chave. Há três tipos diferentes de métodos de interpolação: linear, discreta e por spline.

Com interpolação linear, a animação progride a uma taxa constante da duração do segmento. Por exemplo, se um segmento de quadro chave faz a transição de 0 a 10 em uma duração de 5 segundos, a animação terá como saída os seguintes valores no local especificado vezes:

Tempo

Valor de saída

0

0

1

2

2

4

3

6

4

8

4.25

8.5

4.5

9

5

10

Com interpolação discreta, a função de animação vai de um valor para o próximo sem interpolação. Se um segmento de quadro chave faz a transição de 0 a 10 em uma duração de 5 segundos, a animação terá como saída os seguintes valores no local especificado vezes:

Tempo

Valor de saída

0

0

1

0

2

0

3

0

4

0

4.25

0

4.5

0

5

10

Observe como a animação não altera o valor de saída até o final da duração do segmento.

Interpolação por spline é mais complexo. Ela é descrita na próxima seção.

A interpolação por spline pode ser usada para obter efeitos de tempo mais realistas. Como animações com freqüência são usadas para imitar efeitos que ocorrem no mundo real, os desenvolvedores podem necessário bem controle sobre a aceleração e desaceleração de objetos e feche manipulação dos segmentos de tempo. Quadros chave spline permitem que você anime com interpolação por spline. Outros quadros chave, você deve especificar um Value e KeyTime. Com um quadro chave spline, você também especificar um KeySpline. O exemplo a seguir mostra um único quadro chave spline para uma DoubleAnimationUsingKeyFrames. Observe que o KeySpline propriedade; o que faz com que um quadro chave spline diferente de outros tipos de quadros-chave.

<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />

Um curva de Bézier cúbica é definido por um ponto inicial, um ponto final e dois pontos de controle. O KeySpline propriedade de um quadro chave spline define os dois pontos de controle de uma curva de Bézier que se estende de (0,0) a (1,1). O primeiro ponto de controle controla o fator de curvatura da primeira metade da curva de Bézier, e o segundo ponto de controle controla o fator de curvatura do segunda metade do segmento de Bézier. A curva resultante descreve a taxa de alteração para esse quadro chave spline. Quanto mais íngreme a curva, mais rápido o quadro chave altera seus valores. Como a curva fica mais achatada, o quadro chave altera seus valores mais lentamente.

Você pode usar KeySpline para simular trajetórias físicas como água caindo ou bolas saltitante ou aplicar outras "atenuação" e "Sair" efeitos a animações de movimento. Para efeitos de interação do usuário como plano de fundo fades ou reverberação do botão de controle, você pode aplicar interpolação por spline para acelerar ou diminuir a taxa de alteração de uma animação de uma maneira específica.

O exemplo a seguir especifica um KeySpline de 0,1 e 1,0, que cria a seguinte curva de Bézier.

Uma curva de Bezier

Uma chave spline com pontos de controle (0,0, 1,0) e (1,0, 0,0)

<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />

Esse quadro chave anima rapidamente quando ela começa, lento e acelera novamente antes de terminar.

O exemplo a seguir especifica um KeySpline de 0.5,0.25 0.75,1.0, que cria a seguinte curva de Bézier.

Uma curva de Bezier

Uma chave spline com controle pontos (0,25, 0,5) e (0,75, 1,0)

<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"  KeySpline="0.25,0.5 0.75,1" />

Como a curvatura da curva de Bézier muda muito pouco, esse quadro chave anima a uma taxa quase constante; ele desacelera um pouco seu final.

O exemplo a seguir usa um DoubleAnimationUsingKeyFrames para animar a posição do retângulo. Porque o DoubleAnimationUsingKeyFrames usa SplineDoubleKeyFrame objetos, a transição entre cada valor de quadro chave usa interpolação por splines.

<!-- This rectangle is animated using a key frame animation
     with splined interpolation. -->
<Rectangle 
  Width="50"
  Height="50"
  Fill="Purple">  
  <Rectangle.RenderTransform>
    <TranslateTransform 
      x:Name="SplineAnimatedTranslateTransform" 
      X="0" Y="0" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>

          <!-- Animate the TranslateTransform's X property
               from its base value (0) to 500, then 200,
               then 350 over 15 seconds. -->
          <DoubleAnimationUsingKeyFrames
            Storyboard.TargetName="SplineAnimatedTranslateTransform"
            Storyboard.TargetProperty="X"
            Duration="0:0:15"
            RepeatBehavior="Forever">                
            <SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />

            <SplineDoubleKeyFrame Value="200" KeyTime="0:0:10"  KeySpline="0.0,0.0 1.0,0.0" />

            <SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"  KeySpline="0.25,0.5 0.75,1" />
          </DoubleAnimationUsingKeyFrames>           
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers> 
</Rectangle>

A interpolação por spline pode ser difícil de entender; experimentar com diferentes configurações pode ajudar. O chave Spline Animation Sample permite que você altere os valores da chave spline e veja o resultado na animação.

Você pode usar quadros chave com diferentes tipos de interpolação em uma animação de quadro-chave único. Quando duas animações de quadro-chave com diferentes interpolações após a outra, o método de interpolação do segundo quadro chave é usado para criar a transição entre o primeiro valor para o segundo.

No exemplo a seguir, um DoubleAnimationUsingKeyFrames é criado que usa a interpolação linear, por spline e discreta.

<!-- This rectangle is animated using a key frame animation
     with a combination of interpolation methods. -->
<Rectangle 
  Width="50"
  Height="50"
  Fill="Orange">  
  <Rectangle.RenderTransform>
    <TranslateTransform 
      x:Name="ComboAnimatedTranslateTransform" 
      X="0" Y="0" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>

          <!-- Animate the TranslateTransform's X property
               from its base value (0) to 500, then 200,
               then 350 over 15 seconds. -->
          <DoubleAnimationUsingKeyFrames
            Storyboard.TargetName="ComboAnimatedTranslateTransform"
            Storyboard.TargetProperty="X"
            Duration="0:0:15"
            RepeatBehavior="Forever">
            <DiscreteDoubleKeyFrame Value="500" KeyTime="0:0:7" />
            <LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
            <SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"  
              KeySpline="0.25,0.5 0.75,1" />                      
          </DoubleAnimationUsingKeyFrames>           
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers> 
</Rectangle>

Como outras animações, animações de quadro-chave tem um Duration propriedade. Além de especificar a animação Duration, você precisa especificar qual parte da duração é fornecida para cada quadro chave. Você faz isso descrevendo um KeyTime para cada um dos quadros chave da animação. Cada quadro chave KeyTime especifica esse quadro chave termina.

O KeyTime propriedade não especifica quanto tempo o momento chave é reproduzido. A quantidade de tempo que um quadro-chave é reproduzido é determinada por quando termina o quadro-chave, em que o quadro chave anterior é concluída e a duração da animação. Momentos chave podem ser especificados como um valor de tempo, uma porcentagem, ou como valores especiais Uniform ou Paced.

A lista a seguir descreve as diferentes maneiras de especificar momentos chave.

Você pode usar TimeSpan valores para especificar um KeyTime. O valor deve ser maior ou igual a 0 e menor ou igual a duração da animação. O exemplo a seguir mostra uma animação com uma duração de 10 segundos e quatro quadros chave cujos momentos chave são especificados como valores de hora.

  • O primeiro quadro chave anima do valor base para 100 durante os primeiros 3 segundos, finalizando no momento = 0:0:03.

  • O segundo quadro chave anima de 100 a 200. Ele se inicia após o primeiro quadro chave terminar (momento = 3 segundos) e é reproduzido por 5 segundos, finalizando no momento = 0:0:8.

  • O terceiro quadro chave anima de 200 a 500. Ele se inicia quando o segundo quadro chave termina (momento = 8 segundos) e é reproduzido por 1 segundo, finalizando no momento = 0:0:9.

  • O quarto quadro chave anima de 500 a 600. Ele se inicia quando o terceiro quadro chave terminar (momento = 9 segundos) e é reproduzido por 1 segundo, finalizando no momento = 0:0:10.

<!-- This rectangle is animated with KeyTimes using TimeSpan values. 
     Goes to 100 in the first 3 seconds, 100 to 200 in 
     the next 5 seconds, 300 to 500 in the next second,
     and 500 to 600 in the final second. -->
<Rectangle Width="50" Height="50" Fill="Blue">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform01" X="10" Y="30" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform01" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10"
            RepeatBehavior="Forever">

            <!-- KeyTime properties are expressed as TimeSpan values 
                 which are in the form of "hours:minutes:seconds". -->
            <LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
            <LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
            <LinearDoubleKeyFrame Value="500" KeyTime="0:0:9" />
            <LinearDoubleKeyFrame Value="600" KeyTime="0:0:10" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Um valor percentual Especifica que o quadro chave termina em alguma porcentagem da animação Duration. Em XAML, você especifica a porcentagem como um número seguido de % símbolo. No código, você deve usar o FromPercent método e passá-lo um Double indicando a porcentagem. O valor deve ser maior ou igual a 0 e menor ou igual a 100 por cento. O exemplo a seguir mostra uma animação com uma duração de 10 segundos e quatro quadros chave cujos momentos chave são especificados como porcentagens.

  • O primeiro quadro chave anima do valor base para 100 durante os primeiros 3 segundos, finalizando no momento = 0:0:3.

  • O segundo quadro chave anima de 100 a 200. Ele se inicia após o primeiro quadro chave terminar (momento = 3 segundos) e é reproduzido por 5 segundos, finalizando no momento = 0:0:8 (0.8 * 10 = 8).

  • O terceiro quadro chave anima de 200 a 500. Ele se inicia quando o segundo quadro chave termina (momento = 8 segundos) e é reproduzido por 1 segundo, finalizando no momento = 0:0:9 (0.9 * 10 = 9).

  • O quarto quadro chave anima de 500 a 600. Ele se inicia quando o terceiro quadro chave terminar (momento = 9 segundos) e é reproduzido por 1 segundo, finalizando no momento = 0:0:10 (1 * 10 = 10).

<!-- Identical animation behavior to the previous rectangle 
     but using percentage values for KeyTimes rather then TimeSpan. -->
<Rectangle Height="50" Width="50" Fill="Purple">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform02" X="10" Y="110" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform02" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10"
            RepeatBehavior="Forever">

            <!-- KeyTime properties are expressed as Percentages. -->
            <LinearDoubleKeyFrame Value="100" KeyTime="30%" />
            <LinearDoubleKeyFrame Value="200" KeyTime="80%" />
            <LinearDoubleKeyFrame Value="500" KeyTime="90%" />
            <LinearDoubleKeyFrame Value="600" KeyTime="100%" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Use Uniform tempo quando quiser que cada quadro chave tome a mesma quantidade de tempo.

Um Uniform momento chave divide o tempo disponível igualmente pelo número de quadros chave para determinar o tempo final de cada quadro chave. O exemplo a seguir mostra uma animação com uma duração de 10 segundos e quatro quadros chave cujos momentos chave são especificados como Uniform.

  • O primeiro quadro chave anima do valor base para 100 durante os primeiros 2.5 segundos, finalizando no momento = 0:0:2.5.

  • O segundo quadro chave anima de 100 a 200. Ele se inicia após o primeiro quadro chave terminar (momento = 2.5 segundos) e é reproduzido por aproximadamente 2.5 segundos, finalizando no momento = 0:0:5.

  • O terceiro quadro chave anima de 200 a 500. Ele se inicia quando o segundo quadro chave termina (momento = 5 segundos) e é reproduzido por 2.5 segundos, finalizando no momento = 0:0:7.5.

  • O quarto quadro chave anima de 500 a 600. Ele se inicia quando o segundo quadro chave termina (momento = 7.5 segundos) e é reproduzido por 2.5 segundos, finalizando no momento = 0:0:1.

<!-- This rectangle is animated with KeyTimes using Uniform values.  -->
<Rectangle Height="50" Width="50" Fill="Red">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform03" X="10" Y="190" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform03" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10"
            RepeatBehavior="Forever">

            <!-- KeyTime properties are expressed with values of Uniform. 
                 When a key time is set to "Uniform" the total allotted 
                 time of the animation is divided evenly between key frames.  
                 In this example, the total duration of the animation is 
                 ten seconds and there are four key frames each of which 
                 are set to "Uniform", therefore, the duration of each key frame 
                 is 3.3 seconds (10/3). -->
            <LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
            <LinearDoubleKeyFrame Value="200" KeyTime="Uniform" />
            <LinearDoubleKeyFrame Value="500" KeyTime="Uniform" />
            <LinearDoubleKeyFrame Value="600" KeyTime="Uniform" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Use Paced quando quiser animar a uma taxa constante de tempo.

Um Paced momento chave aloca o tempo disponível de acordo com o comprimento de cada quadro chave para determinar a duração de cada quadro. Isso fornecerá um comportamento que a velocidade ou o ritmo da animação permanece constante. O exemplo a seguir mostra uma animação com uma duração de 10 segundos e três quadros chave cujos momentos chave são especificados comoPaced.

<!-- Using Paced Values. Rectangle moves between key frames at 
     uniform rate except for first key frame
     because using a Paced value on the first KeyFrame in a 
     collection of frames gives a time of zero. -->
<Rectangle Height="50" Width="50" Fill="Orange">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform04" X="10" Y="270" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform04" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10"
            RepeatBehavior="Forever">

            <!-- KeyTime properties are expressed with values of Paced. 
                 Paced values are used when a constant rate is desired. 
                 The time allocated to a key frame with a KeyTime of "Paced" 
                 is determined by the time allocated to the other key 
                 frames of the animation. This time is calculated to 
                 attempt to give a "paced" or "constant velocity" 
                 for the animation. -->
            <LinearDoubleKeyFrame Value="100" KeyTime="Paced" />
            <LinearDoubleKeyFrame Value="200" KeyTime="Paced" />
            <LinearDoubleKeyFrame Value="500" KeyTime="Paced" />
            <LinearDoubleKeyFrame Value="600" KeyTime="Paced" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Observe que, se o momento chave do último quadro chave é Paced ou Uniform, seu momento chave resolvido será definido como 100%. Se o primeiro quadro chave em uma animação com vários quadros é individual, seu momento chave resolvido será definido como 0. (Se a coleção de quadros chave contém apenas um único quadro-chave e é um quadro-chave personalizado, seu momento chave resolvido será definido como 100 por cento.)

Diferentes quadros chave em uma animação de quadro-chave único podem usar tipos de chave de tempo diferentes.

Você pode usar quadros chave com diferentes KeyTime tipos na mesma animação de valor. E, embora seja recomendável que você adicione quadros chave na ordem em que eles devem ser executados, não é necessário. O sistema de animação e temporização é capaz de resolver quadros chave fora de ordem. Quadros chave com momentos chave inválidos são ignorados.

A lista a seguir descreve o procedimento pelo qual momentos chave são resolvidos para os quadros-chave de uma animação de quadro-chave.

  1. Resolver TimeSpan KeyTime valores. 

  2. Determinar a animação tempo de interpolação total, o tempo total necessário a animação de quadro-chave para concluir uma interação direta.

    1. Se a animação Duration não é Automatic ou Forever, o tempo total de interpolação é o valor da animação Duration propriedade.

    2. Caso contrário, o tempo total de interpolação é o maior TimeSpan KeyTime valor especificado entre seus quadros chave, se existir alguma. 

    3. Caso contrário, o tempo total de interpolação é de 1 segundo.

  3. Use o valor do tempo total de interpolação para resolver Percent KeyTime valores. 

  4. Resolva o último quadro chave, se ele já não foi resolvido nas etapas anteriores. Se o KeyTime do último quadro chave é Uniform ou Paced, seu tempo resolvido será igual ao tempo de interpolação total.

    Se o KeyTime do primeiro quadro chave é Paced e essa animação tem mais de quadros de chave, resolve seu KeyTime valor como zero; se houver apenas um quadro chave e seu KeyTime valor é Paced, é resolvido para o tempo total de interpolação, conforme descrito na etapa anterior.

  5. Resolve os demais Uniform KeyTime valores: cada um recebe um pedaço igual do tempo disponível.  Durante esse processo, não resolvidos Paced KeyTime valores temporariamente são tratados como Uniform KeyTime valores e recebem um momento resolvido temporário.  

  6. Resolver o KeyTime valores de quadros chave com momentos chave não especificados usando os quadros chave declarados mais próximos deles que tenham resolvido KeyTime valores.

  7. Resolve os demais Paced KeyTime valores.  Paced KeyTime Use o KeyTime valores de vizinhos chave quadros para determinar seu tempo resolvido. O objetivo é garantir que a velocidade da animação seja constante ao redor do momento resolvido desse quadro chave.

  8. Ordena os quadros chave na ordem de tempo resolvidos (chave primária) e ordem de declaração (chave secundária), ou seja, usa uma classificação estável com base no quadro chave resolvido KeyTime valores.

Mostrar: