Remarque
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Cette rubrique vous présente les animations par images-clés. Les animations de trame clé vous permettent d’animer à l’aide de plus de deux valeurs cibles et de contrôler la méthode d’interpolation d’une animation.
Conditions préalables
Pour comprendre cette vue d’ensemble, vous devez être familiarisé avec les animations et chronologies de Windows Presentation Foundation (WPF). Pour une présentation des animations, consultez la vue d’ensemble de l’animation. Il permet également d’être familiarisé avec les animations From/To/By. Pour plus d'informations, consultez l'aperçu des animations De/À/Par.
Qu’est-ce qu’une animation Key-Frame ?
Comme une animation de type From/To/By, une animation par images clés anime la valeur d'une propriété cible. Il crée une transition entre ses valeurs cibles sur son Duration. Toutefois, alors qu’une animation From/To/By crée une transition entre deux valeurs, une animation d’image clé unique peut créer des transitions entre n’importe quel nombre de valeurs cibles. Contrairement à une animation From/To/By, une animation de trame clé n’a pas de propriétés From, To ou By avec lesquelles définir ses valeurs cibles. Les valeurs cibles d’une animation de trame clé sont décrites à l’aide d’objets de trames clés (par conséquent, le terme « animation de trames clés »). Pour spécifier les valeurs cibles de l’animation, vous créez des objets d’images clés et les ajoutez à la collection de l’animation KeyFrames . Lorsque l’animation s’exécute, elle passe entre les images que vous avez spécifiées.
Outre la prise en charge de plusieurs valeurs cibles, certaines méthodes de trame clé prennent même en charge plusieurs méthodes d’interpolation. La méthode d’interpolation d’une animation définit la façon dont elle passe d’une valeur à l’autre. Il existe trois types d’interpolations : discrète, linéaire et splined.
Pour animer avec une animation de trame clé, procédez comme suit.
Déclarez l’animation et spécifiez son Duration, comme vous le feriez pour une animation de/vers/par.
Pour chaque valeur cible, créez une image clé du type approprié, définissez sa valeur et KeyTimeajoutez-la à la collection de l’animation KeyFrames .
Associez l’animation à une propriété, comme vous le feriez avec une animation From/To/By. Pour plus d’informations sur l’application d’une animation à une propriété à l’aide d’un storyboard, consultez Vue d’ensemble des storyboards.
L’exemple suivant utilise un DoubleAnimationUsingKeyFrames pour animer l’élément Rectangle à quatre emplacements différents.
<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>
Comme une animation From/To/By, une animation d'image clé peut être appliquée à une propriété en utilisant un Storyboard dans le balisage et le code, ou en utilisant la méthode BeginAnimation dans le code. Vous pouvez également utiliser une animation de trame clé pour créer un AnimationClock et l’appliquer à une ou plusieurs propriétés. Pour plus d’informations sur les différentes méthodes d’application d’animations, consultez la vue d’ensemble des techniques d’animation de propriété.
types d’animations Key-Frame
Étant donné que les animations génèrent des valeurs de propriété, il existe différents types d’animations pour différents types de propriétés. Pour animer une propriété qui prend une valeur de type Double (comme la propriété Width d’un élément), vous utilisez une animation qui produit des valeurs de type Double. Pour animer une propriété qui prend un Point, vous utilisez une animation qui produit des Point valeurs, et ainsi de suite.
Les classes d’animation de trame clé appartiennent à l’espace System.Windows.Media.Animation de noms et respectent la convention d’affectation de noms suivante :
<Type>AnimationUsingKeyFrames
Où <Type> est le type de valeur animé par la classe.
WPF fournit les classes d’animation d’images clés suivantes.
Valeurs cibles (images clés) et Temps clés
Tout comme il existe différents types d’animations d’images clés pour animer différents types de propriétés, il existe également différents types d’objets d’images clés : un pour chaque type de méthode animée et interpolation de valeur prise en charge. Les types d’images clés adhèrent à la convention d’affectation de noms suivante :
<InterpolationMethod><, type>KeyFrame
Où <InterpolationMethod> est la méthode d’interpolation utilisée par l’image clé et <Type> est le type de valeur que la classe anime. Une animation de trame clé qui prend en charge les trois méthodes d’interpolation aura trois types d’images clés que vous pouvez utiliser. Par exemple, vous pouvez utiliser trois types d’images clés avec un DoubleAnimationUsingKeyFrames : DiscreteDoubleKeyFrame, LinearDoubleKeyFrame, et SplineDoubleKeyFrame. (Les méthodes d’interpolation sont décrites en détail dans une section ultérieure.)
L’objectif principal d’une trame clé est de spécifier un KeyTime et un Value. Chaque type d’image clé fournit ces deux propriétés.
La Value propriété spécifie la valeur cible de ce keyframe.
La propriété KeyTime spécifie quand, dans l'animation Duration, une image clé Value est atteinte.
Lorsqu’une animation d'image clé commence, elle itère au sein de ses images clés dans l’ordre défini par leur KeyTime propriété.
S’il n’existe aucune image clé au moment 0, l’animation crée une transition entre la valeur actuelle de la propriété cible et la Value première image clé ; sinon, la valeur de sortie de l’animation devient la valeur du premier frame clé.
L'animation crée une transition entre les Value images clés de la première et de la deuxième image en utilisant la méthode d’interpolation spécifiée par la deuxième image clé. La transition commence à la première image clé KeyTime et se termine lorsque le deuxième image clé KeyTime est atteint.
L’animation se poursuit, créant des transitions entre chaque image clé suivante et son image clé précédente.
Enfin, l’animation passe à la valeur de l’image clé dont le temps clé est le plus grand, égal ou inférieur à Duration de l’animation.
Si l’animation Duration est Automatic ou est Duration égale à l’heure du dernier frame clé, l’animation se termine. Sinon, si l’animation est supérieure à l’heure Duration clé du dernier frame clé, l’animation conserve la valeur de l’image clé jusqu’à ce qu’elle atteigne la fin de son Durationimage. Comme toutes les animations, une animation de trame clé utilise sa FillBehavior propriété pour déterminer s’il contient la valeur finale lorsqu’elle atteint la fin de sa période active. Pour plus d’informations, consultez la vue d’ensemble des comportements de minutage.
L’exemple suivant utilise l’objet DoubleAnimationUsingKeyFrames défini dans l’exemple précédent pour illustrer le fonctionnement des propriétés et Value des KeyTime propriétés.
La première image clé définit immédiatement la valeur de sortie de l’animation sur 0.
Le deuxième cadre clé s’anime de 0 à 350. Elle commence après la fin de la première image clé (à 0 seconde) et se joue pendant 2 secondes, se terminant à 0:0:2.
Le troisième cadre clé anime de 350 à 50. Il démarre lorsque la deuxième image clé se termine (à l’heure = 2 secondes) et s’exécute pendant 5 secondes, se terminant à l’heure = 0:0:7.
Le quatrième cadre clé s’anime de 50 à 200. Il démarre lorsque la troisième image clé se termine (à l’heure = 7 secondes) et joue pendant 1 seconde, se terminant à l’heure = 0:0:8.
Étant donné que la Duration propriété de l’animation a été définie sur 10 secondes, l’animation conserve sa valeur finale pendant deux secondes avant de se terminer à l’heure = 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éthodes d’interpolation
Les sections précédentes ont mentionné que certaines animations par images clés prennent en charge plusieurs méthodes d’interpolation. L’interpolation d’une animation décrit comment une animation passe entre les valeurs pendant sa durée. En sélectionnant le type d’image clé que vous utilisez avec votre animation, vous pouvez définir la méthode d’interpolation pour ce segment de trame clé. Il existe trois types de méthodes d’interpolation différents : linéaire, discret et splined.
Interpolation linéaire
Avec l’interpolation linéaire, l’animation progresse à un rythme constant de la durée du segment. Par exemple, si un segment de trame clé passe de 0 à 10 sur une durée de 5 secondes, l’animation génère les valeurs suivantes aux heures spécifiées :
| Heure | Valeur de sortie |
|---|---|
| 0 | 0 |
| 1 | 2 |
| 2 | 4 |
| 3 | 6 |
| 4 | 8 |
| 4,25 | 8.5 |
| 4.5 | 9 |
| 5 | 10 |
Interpolation discrète
Avec l’interpolation discrète, la fonction d’animation passe d’une valeur à l’autre sans interpolation. Si un segment d’image clé passe de 0 à 10 sur une durée de 5 secondes, l’animation génère les valeurs suivantes aux heures spécifiées :
| Heure | Valeur de sortie |
|---|---|
| 0 | 0 |
| 1 | 0 |
| 2 | 0 |
| 3 | 0 |
| 4 | 0 |
| 4,25 | 0 |
| 4.5 | 0 |
| 5 | 10 |
Notez comment l’animation ne modifie pas sa valeur de sortie jusqu’à la fin de la durée du segment.
L’interpolation splined est plus complexe. Il est décrit dans la section suivante.
Interpolation par spline
L'interpolation par spline peut être utilisée pour obtenir des effets de synchronisation plus réalistes. Étant donné que les animations sont si souvent utilisées pour imiter les effets qui se produisent dans le monde réel, les développeurs peuvent avoir besoin d’un contrôle précis de l’accélération et de la décélération des objets, et de la manipulation étroite des segments de minutage. Les images clés spline vous permettent d’animer avec une interpolation par splines. Avec d'autres images-clés, vous spécifiez un Value et un KeyTime. Avec un cadre clé spline, vous spécifiez également un KeySpline. L’exemple suivant montre un cadre clé spline unique pour un DoubleAnimationUsingKeyFrames. Remarquez la KeySpline propriété ; c’est ce qui rend une image clé de type spline différente des autres types d’images clés.
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Une courbe bezier cubique est définie par un point de départ, un point de terminaison et deux points de contrôle. La KeySpline propriété d’un cadre clé spline définit le point de contrôle d’une courbe de Bezier qui s’étend de (0,0) à (1,1). Le premier point de contrôle contrôle le facteur de courbe de la première moitié de la courbe de Bezier, et le deuxième point de contrôle contrôle contrôle le facteur de courbe de la deuxième moitié du segment de Bezier. La courbe résultante décrit le taux de modification de ce cadre clé spline. Plus la courbe est raide, plus l’image clé change ses valeurs. À mesure que la courbe devient plus plate, l'image clé modifie ses valeurs plus lentement.
Vous pouvez utiliser KeySpline pour simuler des trajectoires physiques telles que la chute d’eau ou les balles rebondissantes, ou appliquer d'autres effets d'accélération progressive et de décélération progressive aux animations de mouvement. Pour les effets d’interaction utilisateur tels que les fondus d’arrière-plan ou le rebond du bouton de contrôle, vous pouvez utiliser une interpolation spline pour accélérer ou ralentir le taux de modification d’une animation de manière spécifique.
L’exemple suivant spécifie une KeySpline courbe de 0,1 1,0, qui crée la courbe de Bezier suivante.
Spline clé avec des points de contrôle (0,0, 1.0) et (1.0, 0.0)
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Ce cadre clé s’anime rapidement lorsqu’il commence, ralentit, puis accélère à nouveau avant qu’il ne se termine.
L’exemple suivant spécifie une KeySpline valeur de 0,5,0,25 0,75,1.0, qui crée la courbe de Bezier suivante.
Spline clé avec des points de contrôle (0,25, 0,5) et (0,75, 1,0)
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
Étant donné que la courbure de la courbe de Bezier change très peu, ce cadre clé s’anime à un rythme presque constant ; il ralentit un peu vers sa fin.
L’exemple suivant utilise un DoubleAnimationUsingKeyFrames pour animer la position du rectangle. Étant donné que le DoubleAnimationUsingKeyFrames utilise des objets SplineDoubleKeyFrame, la transition entre chaque valeur de trame clé utilise l’interpolation spline.
<!-- 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>
L’interpolation par spline peut être difficile à comprendre ; faire des expériences avec différents paramètres peut vous aider. L’exemple d’animation de spline de clé vous permet de modifier les valeurs de spline de clé et de voir le résultat sur une animation.
Combinaison de méthodes d’interpolation
Vous pouvez utiliser des images clés avec différents types d’interpolation dans une seule animation d’images clés. Lorsque deux animations d’images clés avec des interpolations différentes se suivent, la méthode d’interpolation du deuxième frame clé est utilisée pour créer la transition de la première valeur à la seconde.
Dans l'exemple suivant, un objet DoubleAnimationUsingKeyFrames est créé, qui utilise l'interpolation linéaire, spline et discrète.
<!-- 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>
En savoir plus sur la durée et les heures clés
Comme les autres animations, les animations d’image clé ont une propriété Duration. Outre la spécification de Durationl’animation, vous devez spécifier la partie de cette durée donnée à chaque image clé. Pour ce faire, vous décrivez un KeyTime pour chacune des images clés de l’animation. Chaque image clé KeyTime spécifie quand cette image clé se termine.
La propriété KeyTime ne spécifie pas la durée pendant laquelle le temps clé joue. La durée de lecture d’une image clé est déterminée par le moment où l’image clé se termine, lorsque l’image clé précédente s’est terminée et la durée de l’animation. Les heures de clé peuvent être spécifiées en tant que valeur de temps, pourcentage ou en tant que valeurs Uniform spéciales ou Paced.
La liste suivante décrit les différentes façons de spécifier les heures clés.
Valeurs d'intervalle de temps
Vous pouvez utiliser des TimeSpan valeurs pour spécifier un KeyTime. La valeur doit être supérieure ou égale à 0 et inférieure ou égale à la durée de l’animation. L’exemple suivant montre une animation avec une durée de 10 secondes et quatre images clés dont les heures clés sont spécifiées en tant que valeurs de temps.
La première image clé progresse de la valeur de base à 100 pendant les 3 premières secondes, se terminant au temps 0:00:03.
Le deuxième image clé s'anime de 100 à 200. Elle commence après la fin de la première image clé (à 3 secondes) et joue pendant une durée de 5 secondes, se terminant à 0:0:8.
Le troisième cadre clé s'anime entre 200 et 500. Il commence lorsque la deuxième image clé se termine (à 8 secondes) et fonctionne pendant 1 seconde, se terminant à 0:00:09.
Le quatrième cadre clé s'anime de 500 à 600. Il commence lorsque la troisième image clé se termine (au temps = 9 secondes) et dure pendant une seconde, se terminant au temps = 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>
Valeurs de pourcentage
Une valeur de pourcentage spécifie que l’image clé se termine à un pourcentage de l’animation Duration. En XAML, vous spécifiez le pourcentage sous la forme d’un nombre suivi du % symbole. Dans le code, vous utilisez la méthode FromPercent et lui passez un Double en indiquant le pourcentage. La valeur doit être supérieure ou égale à 0 et inférieure ou égale à 100 %. L’exemple suivant montre une animation avec une durée de 10 secondes et quatre images clés dont les heures clés sont spécifiées sous forme de pourcentages.
La première image clé s’anime de la valeur de base à 100 au cours des 3 premières secondes, finissant à 0:0:3.
Le deuxième image clé s'anime de 100 à 200. Elle commence après la fin de la première image clé (à t = 3 secondes) et se joue pendant 5 secondes, se terminant à t = 0:0:8 (0.8 * 10 = 8 secondes).
Le troisième cadre clé s'anime entre 200 et 500. Il démarre lorsque la deuxième image clé se termine (à 8 secondes) et joue pendant 1 seconde, se terminant à 0:0:9 (0,9 * 10 = 9).
Le quatrième cadre clé s'anime de 500 à 600. Il démarre lorsque la troisième image clé se termine (à l’heure = 9 secondes) et joue pendant 1 seconde, se terminant à l’heure = 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>
Valeur spéciale, Uniforme
Utilisez le minutage Uniform lorsque vous souhaitez que chaque image clé prenne la même durée.
Un Uniform moment clé divise le temps disponible de façon égale par le nombre d’images clés pour déterminer le temps de fin de chaque image clé. L’exemple suivant montre une animation avec une durée de 10 secondes et quatre images clés dont les heures clés sont spécifiées en tant que Uniform.
La première image clé s'anime de la valeur de base à 100 sur une durée de 2,5 secondes, se terminant à l'heure = 00:00:02,5.
Le deuxième image clé s'anime de 100 à 200. Elle commence après la fin de la première image clé (à l’heure = 2,5 secondes) et se lit pendant environ 2,5 secondes, se terminant à l’heure = 0:0:5.
Le troisième cadre clé s'anime entre 200 et 500. Il démarre lorsque la deuxième image clé se termine (à l’heure = 5 secondes) et s’exécute pendant 2,5 secondes, se terminant à l’heure = 0:0:7.5.
Le quatrième cadre clé s'anime de 500 à 600. Elle démarre lorsque la deuxième image clé se termine (à l’heure = 7,5 secondes) et s’exécute pendant 2,5 secondes, se terminant à l’heure = 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>
Valeur spéciale, Paced
Utilisez Paced le minutage lorsque vous souhaitez animer à un rythme constant.
Une Paced heure clé alloue le temps disponible en fonction de la longueur de chacune des images clés pour déterminer la durée de chaque image. Cela assurera que la vitesse ou le rythme de l’animation reste constant. L’exemple suivant montre une animation avec une durée de 10 secondes et trois images clés dont les heures clés sont spécifiées en tant que 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>
Notez que, si l’heure de clé de la dernière image clé est Paced ou Uniform, alors son heure de clé résolue sera définie sur 100 %. Si la première image clé d'une animation à plusieurs cadres est calée, son temps clé résolu sera défini sur 0. (Si la collection d’images clés ne contient qu’une seule image clé et qu’il s’agit d’une trame clé avec rythme, son temps de clé résolu est défini sur 100 %.
Différentes images clés au sein d’une seule animation d’images clés peuvent utiliser différents types de temps clé.
Combinaison des moments clés, exclusion des images clésOf-Order
Vous pouvez utiliser des images clés avec différents KeyTime types de valeurs dans la même animation. Bien qu’il soit recommandé d’ajouter des images clés dans l’ordre dans lequel elles doivent être jouées, ce n'est pas obligatoirement nécessaire. Le système d’animation et de minutage est capable de trier les images clés désordonnées. Les images clés sont ignorées lorsque les temps de clé sont non valides.
La liste suivante décrit la procédure par laquelle les temps clés sont résolus pour les images clés d'une animation par images clés.
Déterminez le temps total d’interpolation de l’animation, le temps total nécessaire à l’animation d’images clés pour effectuer une itération vers l’avant.
Si l’animation n'est ni Duration ni Automatic ni Forever, le temps d'interpolation total est la valeur de la propriété Duration de l'animation.
Sinon, le temps d’interpolation total est la plus grande TimeSpanKeyTime valeur spécifiée parmi les images clés, si elles existent.
Sinon, le temps d’interpolation total est de 1 seconde.
Utilisez la valeur de temps d’interpolation totale pour résoudre PercentKeyTime les valeurs.
Résolvez le dernier frame clé, s’il n’était pas déjà résolu dans les étapes précédentes. Si KeyTime de la dernière image clé est Uniform ou Paced, son heure résolue sera égale à l'heure d'interpolation totale.
Si la KeyTime de la première image clé est Paced et que cette animation a plus d'une image clé, résolvez sa valeur KeyTime à zéro ; s’il n’y a qu’une seule image clé et que sa valeur KeyTime est Paced, elle est résolue au temps d’interpolation total, comme décrit à l’étape précédente.
Résolvez les valeurs restantes UniformKeyTime : chacune d’elles reçoit un partage égal de l’heure disponible. Pendant ce processus, les valeurs non résolues PacedKeyTime sont temporairement traitées comme des valeurs UniformKeyTime et reçoivent une heure de résolution temporaire.
Résolvez les valeurs KeyTime des images clés dont les temps de clé ne sont pas spécifiés en utilisant les images clés déclarées les plus proches qui ont des valeurs KeyTime résolues.
Résolvez les valeurs restantes PacedKeyTime . Paced KeyTime utilisez les KeyTime valeurs des images clés voisines pour déterminer leur temps de résolution. L’objectif est de s’assurer que la vitesse de l’animation est constante autour du temps résolu de cette trame clé.
Triez les images clés dans l'ordre de temps résolu (clé primaire) et l'ordre de déclaration (clé secondaire), autrement dit, utilisez un tri stable en fonction des valeurs résolues des images clés KeyTime.
Voir aussi
Collaborer avec nous sur GitHub
La source de ce contenu se trouve sur GitHub, où vous pouvez également créer et examiner les problèmes et les demandes de tirage. Pour plus d’informations, consultez notre guide du contributeur.
.NET Desktop feedback