Cet article a fait l'objet d'une traduction manuelle. Déplacez votre pointeur sur les phrases de l'article pour voir la version originale de ce texte. |
Traduction
Source
|
KeyTimeType, énumération
.NET Framework 4
Représente les différents types susceptibles de représenter une instance KeyTime.
Assembly : PresentationCore (dans PresentationCore.dll)
| Nom de membre | Description | |
|---|---|---|
| Uniform | Indique que la durée totale allouée à une séquence d'animation doit être divisée de manière égale entre chaque image clé. | |
| Percent | Indique que les valeurs KeyTime correspondent à un pourcentage de la durée totale allouée à une séquence d'animation donnée. | |
| TimeSpan | Indique que les valeurs KeyTime correspondent aux intervalles de temps TimeSpan définis en fonction du BeginTime d'une séquence d'animation. | |
| Paced | Indique qu'un laps de temps proportionnel à leur longueur respective doit être alloué à chaque image clé. L'objectif global consiste à obtenir une durée qui permette à la séquence d'animation de progresser à un rythme constant. |
Le KeyTime des images clés indique le délai au bout duquel elles arrivent à leur terme. La période de clé n'indique pas la durée de lecture des images clés. La durée de lecture des images clés est déterminée par leur échéance, l'échéance des images clés qui les précèdent ainsi que par la durée de l'animation. Pour plus d'informations, consultez Vue d'ensemble des animations d'image clé.
This example shows how to control the timing of key frames within a key-frame animation. Like other animations, key-frame animations have a Duration property. In addition to specifying the duration of an animation, you need to specify what part of that duration is allotted to each of its key frames. To allot the time, you specify a KeyTime for each key frame in the animation.
The KeyTime for each key frame specifies when a key frame ends (it does not specify the length of time a key frame plays). You can specify a KeyTime as a TimeSpan value, as a percentage, or as the Uniform or Paced special value.
The following example uses a DoubleAnimationUsingKeyFrames to animate a rectangle across the screen. The key frames' key times are set with TimeSpan values.
/*
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>
The following illustration shows when the value of each key frame is reached.
The next example shows an animation that is identical, except that the key frames' key times are set with percentage values.
/* 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>
The following illustration shows when the value of each key frame is reached.
The next example uses Uniform key time values.
/*
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>
The following illustration shows when the value of each key frame is reached.
The final example uses Paced key time values.
/*
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>
The following illustration shows when the value of each key frame is reached.
For simplicity, the code versions of this example use local animations, not storyboards, because only a single animation is being applied to a single property, but the examples may be modified to use storyboards instead. For an example showing how to declare a storyboard in code, see Comment : animer une propriété à l'aide d'un storyboard.
For the complete sample, see KeyFrame Animation Sample. For more information about key frame animations, see the Vue d'ensemble des animations d'image clé.
Windows 7, Windows Vista SP1 ou ultérieur, Windows XP SP3, Windows Server 2008 (installation minimale non prise en charge), Windows Server 2008 R2 (installation minimale prise en charge avec SP1 ou version ultérieure), Windows Server 2003 SP2
Le .NET Framework ne prend pas en charge toutes les versions de chaque plateforme. Pour obtenir la liste des versions prises en charge, consultez Configuration requise du .NET Framework.
