Visão geral de animações de Quadro-Chave
Este tópico apresenta animações de quadro-chave. Animações de quadro chave permitem que você anime usando mais de dois valores alvo e controle o método de interpolação de uma animação.
Este tópico contém as seguintes seções.
Pré-requisitos
Usando animações de quadro chave
Tópicos relacionados
Pré-requisitos
Para entender esta visão geral, você deve estar familiarizado com animações e linhas de tempo do Windows Presentation Foundation (WPF). Para obter uma introdução às animações, consulte o Revisão de Animação. Ele também ajuda a estar familiarizado com as animações do/para/por. Para obter mais informações, consulte o Visão geral sobre animações de/para/por.
O que é uma animação de quadro chave?
Como uma animação de/para/por, uma animação de quadro chave anima o valor de uma propriedade alvo. Ela cria uma transição entre seus valores alvo por suas Duration. No entanto, enquanto uma animação de/para/por cria uma transição entre dois valores, um única animação de quadro chave pode criar transições entre qualquer número de valores alvo. Ao contrário uma animação de/para/por, uma animação de quadro chave não tem propriedades De (From), Para (To) ou Por (By) com as quais definir seus valores alvo. Os valores alvo de uma animação de quadros chave são descritos através de objetos quadro chave (portanto, o termo "animação quadro de chave"). Para especificar os valores alvo da animação, você cria objetos quadro chave e adiciona-os à coleção KeyFrames da animação. Quando a animação é executada, ela faz a transição entre os quadros que você especificou.
Além de dar suporte a vários valores alvo, alguns métodos de quadro chave até mesmo oferecem suporte a vários métodos de interpolação. O método de interpolação de uma animação define como ela faz a transição de um valor para o próximo. Há três tipos de interpolations: discreta, linear, and splined.
Para animar com uma animação de quadro chave, você precisa completar 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 alvo, crie um quadro chave do tipo apropriado, defina seu valor e KeyTime e adicione-o à coleção KeyFrames da animação.
Associe uma animação a uma propriedade, exatamente como você faria com uma animação de/para/por. Para obter mais informações sobre como aplicar uma animação a uma propriedade usando um storyboard, consulte Visão geral sobre Storyboards.
O exemplo a seguir usa uma DoubleAnimationUsingKeyFrames para animar um elemento Rectangle para quatro locais diferentes.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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 um Storyboard em marcação e em código ou usando o método BeginAnimation em código. Você também pode usar uma animação de quadro chave para criar um AnimationClock e aplicá-lo 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 de técnicas de animação de propriedades.
Tipos de animação de quadro chave
Como as animações geram valores de propriedade, existem tipos diferentes de animação para tipos diferentes de propriedades. Para animar uma propriedade que utiliza um Double (tal como a propriedade Width de um elemento), use uma animação que produz valores Double. Para animar uma propriedade que utiliza um Point, use uma animação que produz valores Point, e assim por diante.
As classes de animação de quadro chave pertencem ao espaço de nomes System.Windows.Media.Animation e aderem às convenção de nomenclatura a seguir:
*<Type>*AnimationUsingKeyFrames
Onde <Type> é o tipo de valor que a classe anima.
WPF fornece as seguintes classes de animação de quadro chave.
Tipo de propriedade |
Classe de animação de/para/por correspondente |
Métodos de interpolação suportados |
|---|---|---|
Discreto |
||
Discreto, Linear, por Spline |
||
Discreto, Linear, por Spline |
||
Discreto, Linear, por Spline |
||
Discreto, Linear, por Spline |
||
Discreto, Linear, por Spline |
||
Discreto, Linear, por Spline |
||
Discreto, Linear, por Spline |
||
Discreto |
||
Discreto |
||
Discreto, Linear, por Spline |
||
Discreto, Linear, por Spline |
||
Discreto, Linear, por Spline |
||
Discreto, Linear, por Spline |
||
Discreto, Linear, por Spline |
||
Discreto |
||
Discreto, Linear, por Spline |
||
Discreto, Linear, por Spline |
||
Discreto, Linear, por Spline |
||
Discreto, Linear, por Spline |
Valores alvo (quadros chave) e momentos (time) chave
Assim sistema autônomo existem tipos diferentes de animações quadro-chave de propriedade diferentes tipos de animação, também existem diferentes tipos de objetos de quadro-chave: uma para cada tipo de valor animada e método de interpolação tem suportada. Os tipos de quadro chave aderem às convenção de nomenclatura a seguir:
*<MétodoDeInterpolação><Tipo>*KeyFrame
Onde <MétodoDeInterpolação> é o método de interpolação que o quadro chave usa e <Tipo> é o tipo do 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.
A propriedade Value especifica o valor alvo para o quadro chave.
A propriedade KeyTime especifica quando (dentro da Duration da animação) o Value do quadro chave é alcançado.
Quando uma animação de quadro chave começa, ela itera através de seus quadros chave na ordem definida por suas propriedades KeyTime.
Se não houver nenhum quadro chave com momento 0, a animação cria uma transição entre o valor atual da propriedade alvo e o Value do primeiro quadro chave; caso contrário, o valor de saída da animação se torna 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 no KeyTime do primeiro quadro chave e termina quando o KeyTime do segundo quadro chave é alcançado.
A animação continua, criando as transições entre cada quadro chave subsequente 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 que a Duration da animação.
Se a Duration da animação é Automatic ou sua Duration é igual ao momento do último quadro chave, a animação termina. Caso contrário, se a Duration da animação for maior do que o momento chave do último quadro chave, a animação mantém o valor do quadro chave até que atinja o final da sua Duration. Como todas as animações, uma animação de quadro chave usa a propriedade FillBehavior para determinar se ela mantém o valor final quando atingir o final de seu período ativo. Para obter mais informações, consulte o Visão geral sobre comportamentos de temporização.
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 imediatamente define o valor de saída da animação como 0.
Anima o segundo quadro-chave de 0 a 350. Ele começa após o término do primeiro quadro-chave (em time de = 0 segundos) e é reproduzido por 2 segundos, terminando em time de = 0: 0: 2.
O terceiro quadro-chave será animada de 350 para 50. Ele é iniciado quando termina o segundo quadro-chave (em time de = 2 segundos) e é reproduzido por 5 segundos, terminando em time de = 0: 0: 7.
Anima o quarto quadro-chave de 50 para 200. Ele é iniciado quando termina o terceiro quadro-chave (em time de 7 segundos =) e atividades de 1 segundo, terminando em time de = 0: 0: 8.
Como a propriedade 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="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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 mencionaram que algumas animações de quadro chave suportam diversos métodos de interpolação. Uma animação de interpolação descreve como uma animação faz a transição entre valores ao longo de sua duração. Ao selecionar qual 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. Existem três tipos diferentes de métodos de interpolação: linear, discreta e splined.
Interpolação linear
Com uma 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 nos momentos especificados:
Time |
Valor de saída |
|---|---|
0 |
0 |
1 |
2 |
2 |
4 |
3 |
6 |
4 |
8 |
4.25 |
8.5 |
4.5 |
9 |
5 |
10 |
Interpolação discreta
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 nos momentos especificados:
Time |
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 alvo até o final da duração do segmento.
A interpolação por spline é mais complexa. Ela é descrita na próxima seção.
Interpolação por Spline
A interpolação por spline pode ser usada para obter efeitos de tempo mais realistas. Como as animações são tão frequentemente usadas para imitar efeitos que ocorrem no mundo real, os desenvolvedores podem precisar de controle fino sobre a aceleração e a desaceleração de objetos e manipulação de perto dos segmentos de tempo. Quadros chave spline permitem que você anime com interpolação por spline. Como outros quadros chave, você especifica um Value e um KeyTime. Com um quadro chave spline, você também especifica uma KeySpline. O exemplo a seguir mostra um único quadro chave spline para uma DoubleAnimationUsingKeyFrames. Observe a propriedade KeySpline; é o que torna uma 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" />
Uma curva de Bézier cúbica é definida por um ponto inicial, um ponto final e dois pontos de controle. A propriedade KeySpline 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. A medida que 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 outros efeitos a animações de movimento. Para efeitos de interação do usuário como esmaecimento de plano de fundo ou efeito de um controle botão sendo pressionado e solto, 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 uma KeySpline de 0,1 e 1,0, que cria a seguinte curva de Bézier.
A key spline with control points (0.0, 1.0) and (1.0, 0.0)
.png "Uma curva Bézier")
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Este quadro chave anima rapidamente quando se inicia, desacelera em seguida e novamente acelera antes de terminar.
O exemplo a seguir especifica uma KeySpline de 0.5,0.25 e 0.75,1.0, que cria a seguinte curva de Bézier.
Uma chave spline com pontos de controle (0,25 , 0,5) e (0,75 , 1,0)
.png "Uma curva Bézier")
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
Como a curvatura da curva de Bézier se altera muito pouco, esse quadro chave anima a uma taxa quase constante; ele desacelera um pouco ao se aproximar bem de seu fim.
O exemplo a seguir usa uma DoubleAnimationUsingKeyFrames para animar a posição do retângulo. Como a DoubleAnimationUsingKeyFrames usa objetos SplineDoubleKeyFrame, 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 Exemplo de animação spline chave permite que você altere os valores da chave spline e veja o resultado na 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 diferentes interpolações ocorrem em seguida, o método de interpolação do segundo quadro chave é usado para criar a transição entre o primeiro valor e o segundo.
No exemplo a seguir, uma DoubleAnimationUsingKeyFrames é criada e usa interpolações 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>
Mais informações sobre duração e momentos chave
Como outras animações, animação de quadro-chave possui uma propriedade Duration. Além disso, para especificar a Duration da animação, você precisará especificar que 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 KeyTime dos quadros chave especifica quadro esse quadro chave termina.
A propriedade KeyTime não especifica por quanto tempo o momento chave é reproduzido. O período de tempo em que um quadro chave é reproduzido é determinado por quando termina o quadro chave, quando o quadro chave chave foi finalizado 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.
Valores TimeSpan
Você pode usar valores TimeSpan 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 tempo.
O primeiro quadro chave anima do valor base para 100 durante os primeiros 3 segundos, finalizando no momento = 0:0:03.
The second key frame animates from 100 to 200. Ele começa após o término do primeiro quadro-chave (em time de = 3 segundos) e é reproduzido por 5 segundos, terminando em time de = 0: 0: 8.
O terceiro quadro-chave será animada de 200 para 500. Ele é iniciado quando termina o segundo quadro-chave (em time de 8 segundos =) e atividades de 1 segundo, terminando em time de = 0: 0: 9.
Anima o quarto quadro-chave de 500 para 600. Ele é iniciado quando termina o terceiro quadro-chave (em time de = 9 segundos) e atividades de 1 segundo, terminando em time de = 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>
Valores de Porcentagem
Um valor percentual especifica que o quadro chave termina em alguma porcentagem da Duration da animação. Em XAML, você especifica a porcentagem como um número seguido do símbolo %. Em código, você usa o método FromPercent e passar 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.
The second key frame animates from 100 to 200. Ele começa após o término do primeiro quadro-chave (momento = 3 segundos) e é reproduzido por 5 segundos, terminando em time de = 0: 0: 8 (0,8 * 10 = 8).
O terceiro quadro-chave será animada de 200 para 500. Ele é iniciado quando termina o segundo quadro-chave (em time de = 8 segundos) e atividades de 1 segundo, terminando em time de = 0: 0: 9 (0,9 * 10 = 9).
Anima o quarto quadro-chave de 500 para 600. Ele é iniciado quando termina o terceiro quadro-chave (em time de = 9 segundos) e atividades de 1 segundo, terminando em time de = 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>
Valor especial, Uniform
Use tempo Uniform quando quiser que cada quadro chave tome a mesma quantidade de tempo.
Um momento chave Uniform 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.
The second key frame animates from 100 to 200. Ele é iniciado após o término do primeiro quadro-chave (momento = 2,5 segundos) e é reproduzido por aproximadamente 2,5 segundos, terminando em time de = 0: 0: 5.
O terceiro quadro-chave será animada de 200 para 500. It starts when the second key frame ends (at time = 5 seconds) and plays for 2.5 seconds, ending at time = 0:0:7.5.
Anima o quarto quadro-chave de 500 para 600. Ele é iniciado quando termina o segundo quadro-chave (em time de = 7,5 segundos) e é reproduzido por 2,5 segundos, terminando em time de = 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, Paced
Use tempo Paced quando quiser animar a uma taxa constante.
Um momento chave Paced aloca o tempo disponível de acordo com o comprimento de cada quadro chave para determinar o tempo final de cada quadro chave. Isso fornecerá um comportamento em 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 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 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 multiquadros é conduzido, seu time chave resolvido será conjunto como 0. (Se a coleção de quadro-chave contém apenas um único quadro-chave e é um quadro-chave orientá-los, seu time resolvido chave será definido para 100 por cento.)
Diferentes quadros chave em uma única animação de quadro chave podem usar diferentes tipos de momento chave.
Combinando momentos chave, quadros chave fora de ordem
Você pode usar quadros chave com diferentes tipos de valor de KeyTime na mesma animação. E, embora seja recomendável que você adicione quadros chave na ordem em que eles devem ser executados, isto 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.
Determina o tempo total de interpolação da animação, o tempo total necessário a animação de quadro chave para concluir uma interaçã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 é o maior valor tipo TimeSpan dos KeyTime especificado entre seus quadros chave, se existir algum.
Caso contrário, o tempo total de interpolação é de 1 segundo.
Usa o valor do tempo total de interpolação para resolver valores de KeyTime do tipo Percent.
Resolve 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 um quadros de chave, resolve seu valor de KeyTime para zero; se houver apenas um quadro chave e o valor de KeyTime é Paced, é resolvido para o tempo total de interpolação, conforme descrito na etapa anterior.
Resolve remaining Uniform KeyTime values: eles cada recebem um compartilhamento igual do time disponível. Durante esse processo, valores Paced de KeyTime não resolvidos são temporariamente tratados como valores Uniform de KeyTime e recebem um momento resolvido temporário.
Resolve os valores de KeyTime de quadros chave com momentos chave não especificados usando os quadros chave declarados mais próximos deles que têm valores de KeyTime resolvidos.
Resolve os valores Paced de KeyTime restantes. KeyTimes Paced usam os valores KeyTime dos quadros chave vizinhos para determinar seu tempo/momento resolvido. O objetivo é garantir que a velocidade da animação seja constante ao redor do momento resolvido desse quadro chave.
Ordena os quadros chave por momentos de tempo resolvidos (chave primária) e ordem de declaração (chave secundária), ou seja, usa uma classificação estável com base nos valores resolvidos de KeyTime dos quadros chave.
Consulte também
Tarefas
Exemplo de animação spline chave
Conceitos
Visão geral sobre comportamentos de temporização