Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
Este tópico introduz você às animações de quadro-chave. As animações de quadro-chave permitem animar usando mais de dois valores de destino e controlar o método de interpolação de uma animação.
Pré-requisitos
Para entender essa visão geral, você deve estar familiarizado com animações e linhas do tempo do Windows Presentation Foundation (WPF). Para obter uma introdução às animações, consulte a Visão geral da animação. Também é útil conhecer melhor animações Do/Para/Por. Para obter mais informações, consulte a seção Visão Geral das Animações De/Para/Por.
O que é uma animação Key-Frame?
Como uma animação "From/To/By", uma animação de keyframes anima o valor de uma propriedade alvo. Ele cria uma transição entre seus valores de destino ao longo de sua Duration. No entanto, enquanto uma animação De/para/Por 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 uma animação De/Para/Por, uma animação de quadro-chave não tem propriedades De, Para ou Por com as quais definir seus valores de destino. Os valores de destino de uma animação de quadro-chave são descritos usando objetos de quadros-chave (daí o termo "animação de quadro-chave"). Para especificar os valores de destino da animação, crie objetos de quadro-chave e adicione-os à coleção da KeyFrames animação. Quando a animação é executada, ela faz a transição entre os quadros especificados.
Além de dar suporte a vários valores de destino, alguns métodos de quadro-chave até dão suporte a vários métodos de interpolação. O método de interpolação de uma animação define como ele faz a transição de um valor para o outro. Há três tipos de interpolações: discretas, lineares e splines.
Para animar com uma animação de quadro-chave, conclua as etapas a seguir.
Declare a animação e especifique Duration, assim como você faria para uma animação de/para/por.
Para cada valor de destino, crie um quadro-chave do tipo apropriado, defina o seu valor KeyTime e adicione-o à coleção de animação KeyFrames.
Associe a animação a uma propriedade, assim como você faria com uma animação From/To/By. Para obter mais informações sobre como aplicar uma animação a uma propriedade usando um storyboard, consulte a Visão geral do Storyboards.
O exemplo a seguir usa um DoubleAnimationUsingKeyFrames para animar um Rectangle elemento em 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 uma animação De/Para/Por, uma animação de quadro-chave pode ser aplicada a uma propriedade usando Storyboard na marcação e no código ou usando o método BeginAnimation no código. Você também pode usar uma animação de quadro-chave para criar uma AnimationClock e aplicá-la a uma ou mais propriedades. Para obter mais informações sobre os diferentes métodos para aplicar animações, consulte a Visão geral das técnicas de animação de propriedade.
Key-Frame Tipos de Animação
Como as animações geram valores de propriedade, há diferentes tipos de animação para diferentes tipos de propriedade. Para animar uma propriedade que usa uma Double (como a propriedade Width de um elemento), você usa uma animação que produz Double valores. Para animar uma propriedade que requer um Point, você usa uma animação que produz valores Point, e assim por diante.
As classes de animação de quadro-chave pertencem ao System.Windows.Media.Animation namespace e aderem à seguinte convenção de nomenclatura:
<Tipo>AnimationUsingKeyFrames
Onde <Tipo> é o tipo de valor que a classe anima.
O WPF fornece as seguintes classes de animação de quadro-chave.
| Tipo de propriedade | Classe de animação correspondente de/para/por | Métodos de Interpolação Suportados |
|---|---|---|
| Boolean | BooleanAnimationUsingKeyFrames | Discreto |
| Byte | ByteAnimationUsingKeyFrames | Discreto, Linear, Interpolação por spline |
| Color | ColorAnimationUsingKeyFrames | Discreto, Linear, Interpolação por spline |
| Decimal | DecimalAnimationUsingKeyFrames | Discreto, Linear, Interpolação por spline |
| Double | DoubleAnimationUsingKeyFrames | Discreto, Linear, Interpolação por spline |
| Int16 | Int16AnimationUsingKeyFrames | Discreto, Linear, Interpolação por spline |
| Int32 | Int32AnimationUsingKeyFrames | Discreto, Linear, Interpolação por spline |
| Int64 | Int64AnimationUsingKeyFrames | Discreto, Linear, Interpolação por spline |
| Matrix | MatrixAnimationUsingKeyFrames | Discreto |
| Object | ObjectAnimationUsingKeyFrames | Discreto |
| Point | PointAnimationUsingKeyFrames | Discreto, Linear, Interpolação por spline |
| Quaternion | QuaternionAnimationUsingKeyFrames | Discreto, Linear, Interpolação por spline |
| Rect | RectAnimationUsingKeyFrames | Discreto, Linear, Interpolação por spline |
| Rotation3D | Rotation3DAnimationUsingKeyFrames | Discreto, Linear, Interpolação por spline |
| Single | SingleAnimationUsingKeyFrames | Discreto, Linear, Interpolação por spline |
| String | StringAnimationUsingKeyFrames | Discreto |
| Size | SizeAnimationUsingKeyFrames | Discreto, Linear, Interpolação por spline |
| Thickness | ThicknessAnimationUsingKeyFrames | Discreto, Linear, Interpolação por spline |
| Vector3D | Vector3DAnimationUsingKeyFrames | Discreto, Linear, Interpolação por spline |
| Vector | VectorAnimationUsingKeyFrames | Discreto, Linear, Interpolação por spline |
Valores de destino (quadros-chave) e Key Times
Assim como há diferentes tipos de animações de quadro-chave para animar diferentes tipos de propriedades, também há diferentes tipos de objetos de quadro-chave: um para cada tipo de valor animado e método de interpolação com suporte. Os tipos de quadro-chave seguem a seguinte convenção de nomenclatura:
<Tipo de Método de Interpolação><>KeyFrame
Onde <InterpolationMethod> é o método de interpolação que o quadro-chave usa e <Type> é o tipo de valor que a classe anima. Uma animação de quadro-chave que dá 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: DoubleAnimationUsingKeyFramesDiscreteDoubleKeyFrame, LinearDoubleKeyFramee SplineDoubleKeyFrame. (Os métodos de interpolação são descritos em detalhes em uma seção posterior.)
A principal finalidade de um quadro-chave é especificar um KeyTime e um Value. Cada tipo de quadro-chave fornece essas duas propriedades.
A Value propriedade especifica o valor de destino para esse quadro-chave.
A propriedade KeyTime especifica quando (dentro da animação Duration) um quadro-chave Value é atingido.
Quando uma animação de quadro-chave começa, percorre seus quadros-chave na ordem definida pelas suas propriedades KeyTime.
Se não houver nenhum quadro de chave no momento 0, a animação criará uma transição entre o valor atual da propriedade de destino e o Value do primeiro quadro de chave; caso contrário, o valor de saída da animação se tornará o valor do primeiro quadro de 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 no primeiro quadro-chave KeyTime e termina quando o segundo quadro-chave KeyTime é atingido.
A animação continua, criando transições entre cada quadro-chave subsequente e o quadro-chave anterior a ela.
Por fim, a animação faz a transição para o valor do quadro-chave com o maior tempo de chave igual ou menor que o da Durationanimação.
Se a animação Duration estiver Automatic ou seu Duration for igual ao tempo do último quadro-chave, a animação encerra. Caso contrário, se o Duration da animação for maior que o tempo-chave do último quadro-chave, a animação mantém o valor do quadro-chave até alcançar o fim de sua Duration. Como todas as animações, uma animação de quadro-chave usa sua FillBehavior propriedade para determinar se ela mantém seu valor final quando chega ao final de seu período ativo. Para obter mais informações, consulte a visão geral de comportamentos de tempo.
O exemplo a seguir usa o objeto DoubleAnimationUsingKeyFrames definido no exemplo anterior para demonstrar como as propriedades Value e KeyTime funcionam.
O primeiro quadro-chave define imediatamente o valor de saída da animação como 0.
A animação do segundo quadro-chave vai de 0 a 350. Ele começa depois que o primeiro quadro-chave termina (no tempo = 0 segundos) e é reproduzido por 2 segundos, terminando no tempo = 00:00:02.
O terceiro quadro-chave se move de 350 a 50. Ele começa quando o segundo quadro-chave termina (no tempo = 2 segundos) e é executado por 5 segundos, terminando no tempo = 0:0:7.
O quarto quadro-chave se movimenta de 50 a 200. Ele começa quando o terceiro quadro-chave termina (no tempo = 7 segundos) e é executado por 1 segundo, terminando no tempo = 0:0:8.
Como a Duration propriedade da animação foi definida como 10 segundos, a animação mantém seu valor final por dois segundos antes de terminar no tempo = 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>
Métodos de interpolação
As seções anteriores mencionam que algumas animações de quadro-chave dão suporte a vários métodos de interpolação. A interpolação de uma animação descreve como uma animação faz a transição entre valores ao longo de sua duração. Selecionando qual tipo de quadro chave você usa com sua animação, você pode definir o método de interpolação para esse segmento de quadro chave. Há três tipos diferentes de métodos de interpolação: linear, discreto e splined.
Interpolação linear
Com a interpolação linear, a animação progride a uma taxa constante da duração do segmento. Por exemplo, se um segmento de quadro-chave fizer a transição de 0 para 10 durante 5 segundos, a animação produzirá os seguintes valores nos horários especificados:
| Hora | Valor de saída |
|---|---|
| 0 | 0 |
| 1 | 2 |
| 2 | 4 |
| 3 | 6 |
| 4 | oito |
| 4,25 | 8.5 |
| 4.5 | 9 |
| 5 | 10 |
Interpolação discreta
Com interpolação discreta, a função de animação salta de um valor para o outro sem interpolação. Se um segmento de quadro-chave fizer a transição de 0 para 10 em uma duração de 5 segundos, a animação produzirá os seguintes valores nos horários especificados:
| Hora | 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 seu valor de saída até o final da duração do segmento.
A interpolação de splines é mais complexa. Ele é descrito na próxima seção.
Interpolação por Spline
A interpolação com splines pode ser usada para obter efeitos de tempo mais realistas. Como as animações são frequentemente usadas para imitar efeitos que ocorrem no mundo real, os desenvolvedores podem precisar de um controle fino da aceleração e desaceleração de objetos e da manipulação próxima de segmentos de tempo. Os quadros chave spline permitem animar com interpolação suavizada. Com outros quadros-chave, você especifica um Value e um KeyTime. Com um quadro de chave spline, você também especifica um KeySpline. O exemplo a seguir mostra um único quadro-chave spline para um DoubleAnimationUsingKeyFrames. Observe a KeySpline propriedade; é isso que torna um quadro de chave spline diferente dos outros tipos de quadros-chave.
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Uma curva de Bezier cúbica é definida por um ponto inicial, um ponto de extremidade e dois pontos de controle. A KeySpline propriedade de um quadro de chave spline define os dois pontos de controle de uma curva de Bezier que se estende de (0,0) a (1,1). O primeiro ponto de controle controla o fator curva da primeira metade da curva de Bezier, e o segundo ponto de controle controla o fator curva da segunda metade do segmento Bezier. A curva resultante descreve a taxa de variação para esse quadro-chave spline. Quanto mais íngreme a curva, mais rapidamente o quadro-chave altera seus valores. À medida que a curva fica mais plana, o quadro-chave altera seus valores mais lentamente.
Você pode usar KeySpline para simular trajetórias físicas, como água caindo ou bolas quicando, ou aplicar outros efeitos de "suavização de entrada" e "suavização de saída" nas animações de movimento. Para efeitos de interação do usuário, como desvanecimentos de plano de fundo ou rebote do botão de controle, você pode aplicar interpolação splined para alterar a velocidade de mudança para uma animação de maneira específica.
O exemplo a seguir especifica um KeySpline valor de 0,1 1,0, que cria a seguinte curva de Bezier.
Um spline chave 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 começa, diminui a velocidade e acelera novamente antes de terminar.
O exemplo a seguir especifica um KeySpline valor de 0,5,0,25 0,75,1,0, que cria a seguinte curva de Bezier.
Uma curva-chave com pontos de controle (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 Bezier muda muito pouco, esse quadro chave anima a uma velocidade quase constante; ele desacelera um pouco em direção ao final.
O exemplo a seguir usa um DoubleAnimationUsingKeyFrames para animar a posição do retângulo. Como o DoubleAnimationUsingKeyFrames usa objetos SplineDoubleKeyFrame, a transição entre cada valor de quadro-chave utiliza interpolação curva.
<!-- 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 com splines pode ser difícil de entender; experimentar diferentes configurações pode ajudar. O Exemplo de Animação de Spline de Chave permite que você altere os valores de spline de chave e veja o resultado que ele tem em uma animação.
Combinando métodos de interpolação
Você pode usar quadros-chave com diferentes tipos de interpolação em uma única animação de quadro-chave. Quando duas animações de quadro-chave com interpolações diferentes se seguem, o método de interpolação do segundo quadro-chave é usado para criar a transição do primeiro valor para o segundo.
No exemplo a seguir, é criado um DoubleAnimationUsingKeyFrames que usa interpolação linear, splined 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>
Mais sobre duração e tempos-chave
Assim como outras animações, as animações de quadro-chave têm uma propriedade Duration. Além de especificar a animação Duration, você precisa especificar qual parte dessa duração é dada a cada quadro-chave. Você faz isso descrevendo KeyTime para cada um dos quadros-chave da animação. Cada quadro-chave KeyTime especifica quando esse quadro de chave termina.
A propriedade KeyTime não especifica por quanto tempo o "key time" é reproduzido. A quantidade de tempo que um quadro-chave é reproduzido é determinada pelo término do quadro-chave, quando o quadro-chave anterior terminou e a duração da animação. Os momentos chave podem ser especificados como um valor de tempo, uma porcentagem ou como os valores especiais Uniform ou Paced.
A lista a seguir descreve as diferentes maneiras de especificar horários-chave.
Valores TimeSpan
Você pode usar TimeSpan valores para especificar um KeyTime. O valor deve ser maior ou igual a 0 e menor ou igual à duração da animação. O exemplo a seguir mostra uma animação com duração de 10 segundos e quatro quadros-chave cujos instantes-chave são especificados como valores de tempo.
O primeiro quadro-chave anima do valor base para 100 nos primeiros 3 segundos, terminando no tempo = 0:0:03.
O segundo quadro-chave transiciona de 100 a 200. Ele começa depois que o primeiro quadro-chave termina (no tempo = 3 segundos) e é executado por 5 segundos, terminando no tempo = 0:0:8.
O terceiro quadro-chave anima-se de 200 a 500. Ele começa quando o segundo quadro-chave termina (em t = 8 segundos) e dura 1 segundo, terminando em 00:00:09.
O quarto quadro-chave é animado de 500 a 600. Ele começa assim que o terceiro quadro-chave termina (no momento = 9 segundos) e é reproduzido por 1 segundo, terminando no momento = 0:00: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>
Valores percentuais
Um valor percentual especifica que o quadro-chave termina em algum percentual da animação Duration. Em XAML, especifique a porcentagem como um número seguido pelo % símbolo. No código, você usa o FromPercent método e passa um Double indicando a porcentagem. O valor deve ser maior ou igual a 0 e menor ou igual a 100%. O exemplo a seguir mostra uma animação com duração de 10 segundos e quatro quadros-chave cujos tempos-chave são especificados como porcentagens.
O primeiro quadro-chave é animado do valor base para 100 nos primeiros 3 segundos, terminando ao tempo de 0:0:3.
O segundo quadro-chave transiciona de 100 a 200. Ele começa após o término do primeiro quadro-chave (no instante de 3 segundos) e dura 5 segundos, terminando no instante de 0:00:08 (0,8 * 10 = 8).
O terceiro quadro-chave anima-se de 200 a 500. Ele começa quando o segundo quadro-chave termina (no momento = 8 segundos) e é executado por 1 segundo, terminando no tempo = 0:0:9 (0,9 * 10 = 9).
O quarto quadro-chave é animado de 500 a 600. Ele começa quando o terceiro quadro-chave termina (no momento = 9 segundos) e dura 1 segundo, terminando no momento = 0:00:10 (1 * 10 segundos = 10 segundos).
<!-- 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>
Valor Especial, Uniforme
Use o tempo Uniform quando quiser que cada quadro-chave dure a mesma quantidade de tempo.
Um Uniform tempo de chave divide o tempo disponível igualmente pelo número de quadros-chave para determinar a hora de término de cada quadro-chave. O exemplo a seguir mostra uma animação com duração de 10 segundos e quatro quadros-chave cujos horários de chave são especificados como Uniform.
O primeiro quadro-chave anima de um valor base para 100 nos primeiros 2,5 segundos, terminando no tempo de 0:00:2,5.
O segundo quadro-chave transiciona de 100 a 200. Ele começa após o término do primeiro quadro-chave (no momento = 2,5 segundos) e dura aproximadamente 2,5 segundos, terminando em 0:00:5.
O terceiro quadro-chave anima-se de 200 a 500. Ele começa quando o segundo quadro-chave termina (no tempo = 5 segundos) e é executado por 2,5 segundos, terminando no tempo = 0:0:7.5.
O quarto quadro-chave é animado de 500 a 600. Ele começa quando o segundo quadro-chave termina (no momento = 7,5 segundos) e é executado por 2,5 segundos, terminando no tempo = 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>
Valor Especial, Ritmo Controlado
Utilize o Paced timing quando quiser animar a uma taxa constante.
Um Paced tempo de chave aloca o tempo disponível de acordo com o comprimento de cada um dos quadros-chave para determinar a duração de cada quadro. Isso fornecerá o comportamento de que a velocidade ou o ritmo da animação permanece constante. O exemplo a seguir mostra uma animação com duração de 10 segundos e três quadros-chave cujos tempos de chave são especificados como Paced.
<!-- 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 tempo de chave do último quadro-chave for Paced ou Uniform, o tempo de chave resolvido será definido como 100%. Se o primeiro quadro-chave em uma animação multiframe tiver ritmo, o seu tempo de chave resolvido será definido como 0. (Se a coleção de quadros de chave contiver apenas um único quadro de chave e for um quadro-chave com ritmo, o tempo de chave resolvido será definido como 100%.)
Frames-chave diferentes dentro de uma única animação de frames-chave podem usar diferentes tipos de tempo-chave.
Combinando tempos-chave, quadros-chaveOf-Order
Você pode usar quadros-chave com tipos de valor diferentes KeyTime na mesma animação. E, embora seja recomendável adicionar quadros-chave na ordem em que eles devem ser reproduzidos, não é necessário. O sistema de animação e temporização é capaz de resolver quadros-chave fora de ordem. Os quadros-chave com tempos de chave inválidos são ignorados.
A lista a seguir descreve o procedimento pelo qual os tempos-chave são determinados para os quadros-chave de uma animação de quadros-chave.
Determine o tempo total de interpolação da animação, o tempo total necessário para que a animação de quadro-chave conclua uma iteração para frente.
Se a Duration da animação não for Automatic ou Forever, o tempo total de interpolação é o valor da propriedade Duration da animação.
Caso contrário, o tempo total de interpolação será o maior TimeSpanKeyTime valor especificado entre seus quadros-chave, se houver algum.
Caso contrário, o tempo total de interpolação será de 1 segundo.
Use o valor total de tempo de interpolação para resolver PercentKeyTime valores.
Resolva o último quadro-chave, se ele ainda não tiver sido resolvido nas etapas anteriores. Se o KeyTime do último quadro de chave for Uniform ou Paced, o tempo determinado será igual ao tempo total de interpolação.
Se o KeyTime primeiro quadro-chave for Paced e essa animação tiver mais de um quadro-chave, defina seu KeyTime valor como zero; se houver apenas um quadro-chave e seu valor KeyTime for Paced, ele será resolvido para o tempo total de interpolação, conforme descrito na etapa anterior.
Resolva os valores restantes UniformKeyTime : cada um deles recebe uma parte igual do tempo disponível. Durante esse processo, os valores não resolvidos PacedKeyTime são temporariamente tratados como UniformKeyTime valores e obtêm um tempo resolvido temporário.
Resolva os valores de KeyTime dos quadros-chave cujos tempos não estão especificados, utilizando os quadros-chave declarados mais próximos que têm valores de KeyTime resolvidos.
Resolva os valores restantes PacedKeyTime . Paced KeyTime use os KeyTime valores dos quadros-chave vizinhos para determinar o tempo resolvido. O objetivo é garantir que a velocidade da animação seja constante ao redor do tempo definido desse quadro-chave.
Classifique os quadros-chave em ordem de tempo resolvido (chave primária) e ordem de declaração (chave secundária), ou seja, use uma classificação estável com base nos valores de quadro KeyTime de chave resolvidos.
Consulte também
Colaborar conosco no GitHub
A fonte deste conteúdo pode ser encontrada no GitHub, onde você também pode criar e revisar problemas e solicitações de pull. Para obter mais informações, confira o nosso guia para colaboradores.
.NET Desktop feedback