Nota
O acesso a esta página requer autorização. Podes tentar iniciar sessão ou mudar de diretório.
O acesso a esta página requer autorização. Podes tentar mudar de diretório.
Este tópico introduz animações de quadros-chave. As animações de quadros-chave permitem que crie animações com mais de dois valores-alvo e controle 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 ajuda a estar familiarizado com animações De/Para/Por. Para obter mais informações, consulte a Visão geral das animações De/Para/Por.
O que é uma animação Key-Frame?
Como uma animação De/Para/Por, uma animação de quadro-chave anima o valor de uma propriedade de destino. Cria uma transição entre os seus valores-alvo ao longo dos seus Duration. No entanto, enquanto uma animação De/Para/Por cria uma transição entre dois valores, uma animação de um único 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 de KeyFrames da animação. Quando a animação é executada, ela transita entre os quadros especificados.
Além de suportar vários valores de destino, alguns métodos de quadro-chave suportam até mesmo vários métodos de interpolação. O método de interpolação de uma animação define como ela transita de um valor para o próximo. Existem três tipos de interpolações: discreta, linear e splínica.
Para criar uma animação com fotogramas-chave, siga as etapas a seguir.
Declare a animação e especifique sua Duration, assim como faria para uma animação de/para/por.
Para cada valor de destino, crie um fotograma-chave do tipo apropriado, defina o seu valor e KeyTime, e adicione-o à coleção KeyFrames da animação.
Associe a animação a uma propriedade, assim como 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 Storyboards.
O exemplo a seguir usa um DoubleAnimationUsingKeyFrames para animar um elemento Rectangle 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 um 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 um AnimationClock e aplicá-lo 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 Propriedades .
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), use uma animação que produz valores Double. Para animar uma propriedade que requer um Point, utilize uma animação que produza valores Point e assim por diante.
As classes de animação de quadro-chave pertencem ao namespace System.Windows.Media.Animation e seguem a 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.
Valores-alvo (quadros-chave) e momentos-chave
Assim como existem diferentes tipos de animações de quadro-chave para animar diferentes tipos de propriedade, também há diferentes tipos de objetos de quadro-chave: um para cada tipo de valor animado e método de interpolação suportado. Os tipos de quadros-chave aderem à seguinte convenção de nomenclatura:
<InterpolaçãoMétodo><Tipo>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 ofereça suporte aos 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 quadros-chave com um DoubleAnimationUsingKeyFrames: DiscreteDoubleKeyFrame, LinearDoubleKeyFramee SplineDoubleKeyFrame. (Os métodos de interpolação são descritos em detalhe numa secçã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 de destino para esse quadro-chave.
A propriedade KeyTime especifica quando, dentro do Durationda animação, é atingida a Value de um quadro-chave.
Quando uma animação de quadro-chave começa, itera através dos seus quadros-chave na ordem definida pelas suas propriedades KeyTime.
Se não houver nenhum quadro-chave no momento 0, a animação criará uma transição entre o valor atual da propriedade de destino e a Value do primeiro quadro-chave; caso contrário, o valor de saída da animação torna-se o valor do primeiro quadro-chave.
A animação cria uma transição entre o Value dos primeiro e 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 ao atingir o KeyTime do segundo quadro-chave.
A animação continua, criando transições entre cada quadro-chave subsequente e seu quadro-chave anterior.
Finalmente, a animação transita para o valor do fotograma-chave com o maior tempo de chave que seja igual ou inferior ao Durationda animação.
Se a Duration da animação for Automatic ou se a sua Duration for igual ao momento do último quadro-chave, a animação termina. Caso contrário, se o Duration da animação for maior do que o tempo-chave do último quadro-chave, a animação manterá o valor do quadro-chave até chegar ao final de sua Duration. Como todas as animações, uma animação de quadro-chave utiliza a sua propriedade FillBehavior para determinar se mantém o seu valor final quando atinge o fim do seu período ativo. Para obter mais informações, consulte a Visão geral de 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 define imediatamente o valor de saída da animação como 0.
O segundo quadro-chave anima-se 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 = 0:0:2.
O terceiro quadro-chave anima do valor de 350 para 50. Começa quando o segundo quadro-chave termina (no tempo = 2 segundos) e é reproduzido por 5 segundos, terminando no tempo = 0:0:7.
O quarto quadro-chave é animado de 50 a 200. Começa quando o terceiro quadro-chave termina (no tempo = 7 segundos) e joga por 1 segundo, terminando no tempo = 0:0:8.
Como a propriedade Duration 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 mencionaram que algumas animações de quadros-chave suportam vários métodos de interpolação. A interpolação de uma animação descreve como uma animação transita entre valores ao longo de sua duração. Ao selecionar 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. Existem três tipos diferentes de métodos de interpolação: linear, discreto e com splines.
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 transitar de 0 para 10 durante uma duração de 5 segundos, a animação produzirá os seguintes valores nos horários especificados:
| Tempo / Hora | 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 salta de um valor para o seguinte sem interpolação. Se um segmento de quadro-chave transitar de 0 para 10 durante uma duração de 5 segundos, a animação produzirá os seguintes valores nos horários especificados:
| Tempo / 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 spline é mais complexa. É descrito na próxima seção.
Interpolação Spline
A interpolação estriada 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 controlo minucioso da aceleração e desaceleração dos objetos, bem como de uma manipulação precisa dos segmentos de tempo. Os quadros-chave Spline permitem que você anime com interpolação estriada. Com outros quadros-chave, especificas um Value e KeyTime. Com um quadro-chave spline, você também especifica um KeySpline. O exemplo a seguir mostra um único quadro-chave spline para um DoubleAnimationUsingKeyFrames. Observe a propriedade KeySpline; isso é o que torna um quadro-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 cúbica de Bezier é 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 Bezier que se estende de (0,0) a (1,1). O primeiro ponto de controle controla o fator de curva da primeira metade da curva de Bezier, e o segundo ponto de controle controla o fator de curva da segunda metade do segmento de Bezier. A curva resultante descreve a taxa de mudança para esse quadro-chave spline. Quanto mais íngreme a curva, mais rapidamente o quadro-chave altera os seus valores. À medida que a curva fica mais plana, o quadro-chave muda seus valores mais lentamente.
Você pode usar KeySpline para simular trajetórias físicas, como a queda de água ou bolas a saltar, ou aplicar outros efeitos de "facilidade de entrada" e "facilidade de saída" para animações de movimento. Para efeitos de interação do utilizador, como desvanecimento em segundo plano ou recuperação do botão de controle, pode-se aplicar interpolação splineada 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 1,0, que cria a seguinte curva de Bezier.
Uma 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" />
Este quadro-chave é animado rapidamente quando começa, abranda e, em seguida, acelera novamente antes de terminar.
O exemplo a seguir especifica uma KeySpline de 0.5,0.25 0.75,1.0, que cria a seguinte curva de Bezier.
Uma spline chave com pontos de controlo (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, este quadro-chave anima-se a uma taxa quase constante; abranda um pouco no seu 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 usa interpolação estriada.
<!-- 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 estriada pode ser difícil de entender; Experimentar diferentes configurações pode ajudar. A amostra de animação Key Spline permite-lhe alterar os valores da spline de chave e ver o resultado que isso tem numa animação.
Combinando métodos de interpolação
Você pode usar quadros-chave com diferentes tipos de interpolação numa única animação de quadros-chave. Quando duas animações de quadro-chave com interpolações diferentes se sucedem, 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, é criada uma DoubleAnimationUsingKeyFrames que usa interpolação linear, estriada 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 Horários-chave
Como outras animações, as animações com quadros-chave têm uma propriedade Duration. Além de especificar o Durationda animação, é necessário especificar qual parte dessa duração é atribuída a cada quadro-chave. Para fazer isso, descreva um KeyTime para cada um dos quadros-chave da animação. A KeyTime de cada quadro-chave especifica quando esse quadro-chave termina.
A propriedade KeyTime não especifica por quanto tempo o tempo-chave é reproduzido. A duração de um quadro-chave é determinada pelo momento em que o quadro-chave termina, o momento em que o quadro-chave anterior terminou e a duração da animação. Os tempos-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 os principais horários.
Valores de TimeSpan
Você pode usar os TimeSpan valores para especificar os 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 uma duração de 10 segundos e quatro quadros-chave cujos tempos-chave são especificados como valores de tempo.
O primeiro quadro-chave anima do valor base para 100 ao longo dos 3 segundos iniciais, terminando às 0:0:03.
O segundo quadro-chave é animado de 100 a 200. Ele começa depois que o primeiro quadro-chave termina (no tempo = 3 segundos) e é reproduzido por 5 segundos, terminando no tempo = 0:0:8.
O terceiro quadro-chave é animado de 200 a 500. Começa quando o segundo quadro-chave termina (no tempo = 8 segundos) e é executado por 1 segundo, terminando no tempo = 0:00:09.
O quarto fotograma-chave anima de 500 a 600. Começa quando o terceiro quadro-chave termina (no tempo = 9 segundos) e é reproduzido por 1 segundo, terminando no tempo = 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 percentuais
Um valor percentual especifica que o quadro-chave termina em alguma porcentagem do Durationda animação. Em XAML, você especifica a porcentagem como um número seguido pelo símbolo %. No código, você usa o método FromPercent e passa uma 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 a partir do valor base para 100 durante os primeiros 3 segundos, terminando no tempo = 0:0:3.
O segundo quadro-chave é animado de 100 a 200. Ele começa depois que o primeiro quadro-chave termina (no tempo = 3 segundos) e é reproduzido por 5 segundos, terminando no tempo = 0:0:8 (0,8 * 10 = 8).
O terceiro quadro-chave é animado de 200 a 500. Começa quando o segundo quadro-chave termina (no tempo = 8 segundos) e é reproduzido por 1 segundo, terminando no tempo = 0:0:9 (0,9 * 10 = 9).
O quarto fotograma-chave anima de 500 a 600. Começa quando o terceiro quadro-chave termina (no tempo = 9 segundos) e joga por 1 segundo, terminando no tempo = 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, Uniforme
Utilize o tempo Uniform quando quiser que cada quadro-chave leve a mesma quantidade de tempo.
Um momento chave Uniform divide o tempo disponível igualmente pelo número de quadros-chave para determinar o momento de término de cada quadro-chave. O exemplo a seguir mostra uma animação com uma duração de 10 segundos e quatro quadros-chave cujos tempos-chave são especificados como Uniform.
O primeiro quadro-chave anima do valor base para 100 durante os primeiros 2,5 segundos, terminando no tempo = 0:0:2.5.
O segundo quadro-chave é animado de 100 a 200. Ele começa depois que o primeiro quadro-chave termina (no tempo = 2,5 segundos) e é reproduzido por aproximadamente 2,5 segundos, terminando no tempo = 0:0:5.
O terceiro quadro-chave é animado de 200 a 500. Começa quando o segundo quadro-chave termina (no tempo = 5 segundos) e é reproduzido por 2,5 segundos, terminando no tempo = 0:0:7.5.
O quarto fotograma-chave anima de 500 a 600. Começa quando o segundo quadro-chave termina (no tempo = 7,5 segundos) e é reproduzido 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 a cronometragem Paced quando quiser animar a uma taxa constante.
Uma chave de tempo Paced aloca o tempo disponível de acordo com a duração de cada um dos quadros-chave para definir 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 uma duração de 10 segundos e três quadros-chave cujos tempos-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>
Note que, se o tempo-chave do último quadro-chave for Paced ou Uniform, o tempo-chave resultante será ajustado para 100%. Se o primeiro quadro-chave de uma animação multiframa for temporizado, o seu tempo-chave resolvido é definido como 0. (Se a coleção de quadros-chave contiver apenas um único quadro-chave e for um quadro-chave cadenciado, seu tempo de chave resolvido será definido como 100%.)
Diferentes quadros-chave dentro de uma única animação de quadro-chave podem usar diferentes tipos de tempo-chave.
Combinando Momentos-chave, Quadros-chave fora deOf-Order
Você pode usar quadros-chave com diferentes tipos de valores de KeyTime na mesma animação. E, embora seja recomendável adicionar quadros-chave na ordem em que eles devem ser reproduzidos, isso não é necessário. O sistema de animação e cronometragem é 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 resolvidos para os quadros-chave de uma animação.
Determine o tempo total de interpolação da animação, ou seja, o tempo total que a animação de quadro-chave leva para concluir uma iteração completa.
Se o Duration da animação não for Automatic ou Forever, o tempo total de interpolação será o valor da propriedade Duration da animação.
Caso contrário, o tempo total de interpolação é o maior valor de TimeSpanKeyTime especificado entre seus quadros-chave, se houver.
Caso contrário, o tempo total de interpolação é de 1 segundo.
Use o valor total do tempo de interpolação para resolver PercentKeyTime valores.
Resolva o último quadro-chave, se ainda não tiver sido resolvido nas etapas anteriores. Se o KeyTime do último quadro-chave for Uniform ou Paced, seu tempo resolvido será igual ao tempo total de interpolação.
Se a KeyTime do primeiro quadro-chave for Paced e essa animação tiver mais do que um quadro-chave, resolva seu valor de KeyTime para zero; se houver apenas um quadro-chave e seu valor KeyTime for Paced, ele será resolvido para a duração total de interpolação, conforme descrito na etapa anterior.
Resolva os valores UniformKeyTime restantes: cada um deles recebe uma parte igual do tempo disponível. Durante esse processo, os valores de PacedKeyTime não resolvidos são temporariamente tratados como valores UniformKeyTime e obtêm um tempo de resolução temporário.
Resolva os valores KeyTime de quadros-chave com tempos de chave não especificados utilizando os quadros-chave declarados mais próximos que já tenham valores KeyTime resolvidos.
Resolva os valores PacedKeyTime restantes. Paced KeyTime utilizam os valores KeyTime dos quadros-chave vizinhos para determinar o tempo final. O objetivo é garantir que a velocidade da animação seja constante em torno do tempo definido deste 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 KeyTime do quadro-chave resolvido.
Ver também
- KeyTime
- KeySpline
- Timeline
- Exemplo de animação de curva spline chave
- Exemplo de Animação de KeyFrame
- Visão geral da animação
- Visão geral do Storyboards
- Key-Frame Tópicos de instruções
- Visão geral dos comportamentos de cronometragem
Colabore connosco no GitHub
A fonte deste conteúdo pode ser encontrada no GitHub, onde também pode criar e rever issues e pull requests. Para mais informações, consulte o nosso guia para colaboradores.
.NET Desktop feedback