Postupy: Řízení časování animace Key-Frame
Tento příklad ukazuje, jak řídit časování klíčových snímků v animaci s klíčovým snímkem. Podobně jako jiné animace mají klíčové snímky vlastnost Duration. Kromě určení doby trvání animace je nutné zadat, jaká část této doby je přidělena každému z jeho klíčových snímků. Pro přidělení času zadáte KeyTime pro každý klíčový snímek v animaci.
KeyTime pro každý klíčový snímek specifikuje, kdy se klíčový snímek ukončí (neurčuje dobu trvání přehrávání klíčového snímku). Můžete zadat KeyTime jako hodnotu TimeSpan, jako procento nebo jako Uniform nebo Paced zvláštní hodnotu.
Příklad
Následující příklad používá DoubleAnimationUsingKeyFrames k animaci obdélníku přes obrazovku. Klíčové časy klíčových snímků jsou nastavené pomocí hodnot 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.
'
' Create the a rectangle.
Dim aRectangle As 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.
Dim translateTransform1 As New TranslateTransform()
aRectangle.RenderTransform = translateTransform1
' Create a DoubleAnimationUsingKeyFrames
' to animate the transform.
Dim transformAnimation As 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.
AddHandler aRectangle.Loaded, Sub(sender As Object, e As RoutedEventArgs) 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>
Následující obrázek ukazuje, kdy je dosažena hodnota každého klíčového snímku.
Následující příklad ukazuje animaci, která je shodná, s tím rozdílem, že časování klíčových snímků je nastaveno v procentech.
/*
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.
'
' Create the a rectangle.
Dim aRectangle As 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.
Dim translateTransform2 As New TranslateTransform()
aRectangle.RenderTransform = translateTransform2
' Create a DoubleAnimationUsingKeyFrames
' to animate the transform.
Dim transformAnimation As 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.
AddHandler aRectangle.Loaded, Sub(sender As Object, e As RoutedEventArgs) 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>
Následující ilustrace ukazuje, kdy je dosaženo hodnoty každého klíčového snímku.
V dalším příkladu se používají klíčové časové hodnoty 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.
'
' Create the a rectangle.
Dim aRectangle As 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.
Dim translateTransform3 As New TranslateTransform()
aRectangle.RenderTransform = translateTransform3
' Create a DoubleAnimationUsingKeyFrames
' to animate the transform.
Dim transformAnimation As 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.
AddHandler aRectangle.Loaded, Sub(sender As Object, e As RoutedEventArgs) 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>
Následující ilustrace ukazuje, kdy je dosaženo hodnoty každého klíčového snímku.
Poslední příklad používá klíčové časové hodnoty 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.
'
' Create the a rectangle.
Dim aRectangle As 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.
Dim translateTransform4 As New TranslateTransform()
aRectangle.RenderTransform = translateTransform4
' Create a DoubleAnimationUsingKeyFrames
' to animate the transform.
Dim transformAnimation As 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.
AddHandler aRectangle.Loaded, Sub(sender As Object, e As RoutedEventArgs) 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>
Následující ilustrace ukazuje, kdy je dosažena hodnota každého klíčového snímku.
Pro zjednodušení používají verze kódu v tomto příkladu místní animace, ne scénáře, protože pouze jedna animace se používá na jednu vlastnost, ale příklady mohou být změněny tak, aby místo toho používaly scénáře. Příklad znázorňující, jak deklarovat scénář v kódu, najdete v tématu Animace vlastnosti pomocí scénáře.
Kompletní ukázku naleznete v části Ukázka animace klíčových snímků. Další informace o animacích klíčových snímků najdete v přehledu animací Key-Frame.
Viz také
- Přehled Key-Frame animací
- Přehled animací
- Návody Témata
Spolupracujte s námi na GitHubu
Zdroj tohoto obsahu najdete na GitHubu, kde můžete také vytvářet a kontrolovat problémy a žádosti o přijetí změn. Další informace najdete v našem průvodci pro přispěvatele.
.NET Desktop feedback