Como: Controle de temporização de animação de quadro-chave
Este exemplo demonstra como controlar a temporização de chaves de quadro dentro de uma animação de quadro-chave. Como outras animações, animação de quadro-chave possui uma propriedade Duration. Além de especificar a duração de uma animação, você precisa especificar que parte dessa duração é atribuída a cada um de seus quadros chave. Neste ínterim, você especifica um KeyTime para cada quadro chave na animação.
O KeyTime para cada quadro chave especifica quando um quadro chave termina (ele não especifica a duração de tempo que o quadro chave toca). Você pode especificar um KeyTime como um valor TimeSpan , como uma porcentagem, ou como o valor especial Uniform ou Paced .
Exemplo
O exemplo seguinte usa um DoubleAnimationUsingKeyFrames para animar um retângulo pela tela. Os tempos da chave do quadro chave são especificados com valores TimeSpan.
/*
This Rectangle is animated with KeyTimes using TimeSpan Values.
It moves horizontally to 100 in the first 3 seconds, 100 to 300 in
the next second, and 300 to 500 in the last 6 seconds.
*/
// Create the a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Fill = Brushes.Blue;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 5;
aRectangle.Width = 50;
aRectangle.Height = 50;
// Create a transform to move the rectangle
// across the screen.
TranslateTransform translateTransform1 =
new TranslateTransform();
aRectangle.RenderTransform = translateTransform1;
// Create a DoubleAnimationUsingKeyFrames
// to animate the transform.
DoubleAnimationUsingKeyFrames transformAnimation =
new DoubleAnimationUsingKeyFrames();
transformAnimation.Duration = TimeSpan.FromSeconds(10);
// Animate to 100 at 3 seconds.
transformAnimation.KeyFrames.Add(
new LinearDoubleKeyFrame(100, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3))));
// Animate to 300 at 4 seconds.
transformAnimation.KeyFrames.Add(
new LinearDoubleKeyFrame(300, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4))));
// Animate to 500 at 10 seconds.
transformAnimation.KeyFrames.Add(
new LinearDoubleKeyFrame(500, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(10))));
// Start the animation when the rectangle is loaded.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
translateTransform1.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
};
<!-- This Rectangle is animated with KeyTimes using TimeSpan Values.
It moves horizontally to 100 in the first 3 seconds, 100 to 300 in
the next second, and 300 to 500 in the last 6 seconds. -->
<Rectangle Fill="Blue" Stroke="Black" StrokeThickness="5"
Width="50" Height="50">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform1" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform1"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<!-- These KeyTime properties are specified as TimeSpan values
which are in the form of "hours:minutes:seconds". -->
<LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
<LinearDoubleKeyFrame Value="300" KeyTime="0:0:4" />
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:10" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
A ilustração a seguir mostra quando o valor de cada quadro chave é atingido.
.png "Os valores de chave são alcançados em 3, 4 e 10 segundos")
O próximo exemplo demonstra uma animação que é idêntica, exceto que os tempos da chave do quadro chave são especificados com valores de porcentagem.
/*
This rectangle moves horizontally to 100 in the first 3 seconds,
100 to 300 in the next second, and 300 to 500 in the last 6 seconds.
*/
// Create the a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Fill = Brushes.Purple;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 5;
aRectangle.Width = 50;
aRectangle.Height = 50;
// Create a transform to move the rectangle
// across the screen.
TranslateTransform translateTransform2 =
new TranslateTransform();
aRectangle.RenderTransform = translateTransform2;
// Create a DoubleAnimationUsingKeyFrames
// to animate the transform.
DoubleAnimationUsingKeyFrames transformAnimation =
new DoubleAnimationUsingKeyFrames();
transformAnimation.Duration = TimeSpan.FromSeconds(10);
// Animate to 100 at 30% of the animation's duration.
transformAnimation.KeyFrames.Add(
new LinearDoubleKeyFrame(100, KeyTime.FromPercent(0.3)));
// Animate to 300 at 40% of the animation's duration.
transformAnimation.KeyFrames.Add(
new LinearDoubleKeyFrame(300, KeyTime.FromPercent(0.4)));
// Animate to 500 at 100% of the animation's duration.
transformAnimation.KeyFrames.Add(
new LinearDoubleKeyFrame(500, KeyTime.FromPercent(1.0)));
// Start the animation when the rectangle is loaded.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
translateTransform2.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
};
<!-- This rectangle moves horizontally to 100 in the first 3 seconds,
100 to 300 in the next second, and 300 to 500 in the last 6 seconds.-->
<Rectangle Fill="Purple" Stroke="Black" StrokeThickness="5"
Width="50" Height="50">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform2" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform2"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<!-- KeyTime properties are expressed as Percentages. -->
<LinearDoubleKeyFrame Value="100" KeyTime="30%" />
<LinearDoubleKeyFrame Value="300" KeyTime="40%" />
<LinearDoubleKeyFrame Value="500" KeyTime="100%" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
A ilustração a seguir mostra quando o valor de cada quadro chave é atingido.
.png "Os valores de chave são alcançados em 3, 4 e 10 segundos")
O próximo exemplo usa valores de tempo de chave Uniform.
/*
This rectangle is animated with KeyTimes using Uniform values.
Goes to 100 in the first 3.3 seconds, 100 to
300 in the next 3.3 seconds, 300 to 500 in the last 3.3 seconds.
*/
// Create the a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Fill = Brushes.Red;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 5;
aRectangle.Width = 50;
aRectangle.Height = 50;
// Create a transform to move the rectangle
// across the screen.
TranslateTransform translateTransform3 =
new TranslateTransform();
aRectangle.RenderTransform = translateTransform3;
// Create a DoubleAnimationUsingKeyFrames
// to animate the transform.
DoubleAnimationUsingKeyFrames transformAnimation =
new DoubleAnimationUsingKeyFrames();
transformAnimation.Duration = TimeSpan.FromSeconds(10);
/*
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).
*/
// Animate to 100.
transformAnimation.KeyFrames.Add(
new LinearDoubleKeyFrame(100, KeyTime.Uniform));
// Animate to 300.
transformAnimation.KeyFrames.Add(
new LinearDoubleKeyFrame(300, KeyTime.Uniform));
// Animate to 500.
transformAnimation.KeyFrames.Add(
new LinearDoubleKeyFrame(500, KeyTime.Uniform));
// Start the animation when the rectangle is loaded.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
translateTransform3.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
};
<!-- This rectangle is animated with KeyTimes using Uniform values.
Goes to 100 in the first 3.3 seconds, 100 to
300 in the next 3.3 seconds, 300 to 500 in the last 3.3 seconds. -->
<Rectangle Fill="Red" Stroke="Black" StrokeThickness="5"
Width="50" Height="50">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform3" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform3"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<!-- 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="300" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="500" KeyTime="Uniform" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
A ilustração a seguir mostra quando o valor de cada quadro chave é atingido.
.png "Os valores de chave são alcançados em 3,3, 6,6 e 9,9 segundos")
O último exemplo usa valores de tempo de chave Paced.
/*
This rectangle is animated with KeyTimes using Paced Values.
The 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.
*/
// Create the a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Fill = Brushes.Orange;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 5;
aRectangle.Width = 50;
aRectangle.Height = 50;
// Create a transform to move the rectangle
// across the screen.
TranslateTransform translateTransform4 =
new TranslateTransform();
aRectangle.RenderTransform = translateTransform4;
// Create a DoubleAnimationUsingKeyFrames
// to animate the transform.
DoubleAnimationUsingKeyFrames transformAnimation =
new DoubleAnimationUsingKeyFrames();
transformAnimation.Duration = TimeSpan.FromSeconds(10);
/*
Use Paced values 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.
*/
// Animate to 100.
transformAnimation.KeyFrames.Add(
new LinearDoubleKeyFrame(100, KeyTime.Paced));
// Animate to 300.
transformAnimation.KeyFrames.Add(
new LinearDoubleKeyFrame(300, KeyTime.Paced));
// Animate to 500.
transformAnimation.KeyFrames.Add(
new LinearDoubleKeyFrame(500, KeyTime.Paced));
// Start the animation when the rectangle is loaded.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
translateTransform4.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
};
<!-- This rectangle is animated with KeyTimes using Paced Values.
The 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 Fill="Orange" Stroke="Black" StrokeThickness="5"
Width="50" Height="50">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform4" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform4"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<!-- Use Paced values 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="300" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="500" KeyTime="Paced" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
A ilustração a seguir mostra quando o valor de cada quadro chave é atingido.
.png "Os valores de chave são alcançados em 0, 5 e 10 segundos")
Para simplificar, as versões de código neste exemplo usam animações locais, não storyboards, porque uma única animação está sendo aplicada a uma única propriedade, mas os exemplos podem ser modificados para utilizar storyboards no lugar. Para um exemplo demonstrando como declarar um storyboard no código, consulte Como: Animate a Property by Using a Storyboard.
For the complete sample, see Exemplo de animação KeyFrame. Para obter mais informações sobre animações de quadro chave, consulte o Visão geral de animações de Quadro-Chave.
Consulte também
Conceitos
Visão geral de animações de Quadro-Chave