Vue d'ensemble des animations d'image clé

Cette rubrique vous initie aux animations d'image clé. Les animations d'image clé vous permettent d'animer en utilisant plus de deux valeurs cibles et contrôlent la méthode d'interpolation d'une animation.

Cette rubrique contient les sections suivantes.

• Composants requis

• Utilisation des animations d'image clé

• Rubriques connexes

Composants requis

Pour comprendre cette vue d'ensemble, vous devez être familiarisé avec les animations et les chronologies Windows Presentation Foundation (WPF). Pour une présentation des animations, consultez Vue d'ensemble de l'animation. Elle permet également de se familiariser avec les animations From/To/By. Pour plus d'informations, consultez Vue d'ensemble des animations From/To/By.

Qu'est-ce qu'une animation d'image clé ?

Comme pour une animation From/To/By, une animation d'image clé anime la valeur d'une propriété cible. Elle crée une transition parmi ses valeurs cibles sur sa Duration. Toutefois, bien qu'une animation From/To/By crée une transition entre deux valeurs, une animation d'image clé unique peut créer des transitions parmi n'importe quel nombre de valeurs cibles. Contrairement à une animation From/To/By, une animation d'image clé n'a aucune propriété From/To ou By avec lesquelles définir ses valeurs cibles. Les valeurs cibles d'une animation d'image clé sont décrites à l'aide d'objets d'images clés (d'où le terme, « animation d'image clé »). Pour spécifier les valeurs cibles de l'animation, créez des objets d'image clé et ajoutez-les à la collection KeyFrames de l'animation. Lors de l'exécution de l'animation, celle-ci passe par les images que vous avez indiquées.

En plus de prendre en charge plusieurs valeurs cibles, certaines méthodes d'image 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 transite d'une valeur à la suivante. Il existe trois types d'interpolations : l'interpolation discrète, linéaire et spline.

Pour animer avec une animation d'image clé, vous devez effectuer les étapes suivantes.

• Déclarez l'animation et spécifiez sa Duration, comme vous le feriez pour une animation from/to/by.

• Pour chaque valeur cible, créez une image clé du type approprié, définissez sa valeur et son KeyTime et ajoutez-la à la collection KeyFrames de l'animation.

• Associez l'animation à une propriété, comme vous le feriez pour une animation From/To/By. Pour plus d'informations sur l'application d'une animation à une propriété à l'aide d'une table de montage séquentiel, consultez Vue d'ensemble des storyboards.

L'exemple suivant utilise DoubleAnimationUsingKeyFrames pour animer un élément Rectangle vers quatre emplacements différents.

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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>

Tout 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 d'image 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 pour appliquer des animations, consultez Vue d'ensemble des techniques d'animation de propriétés.

Types d'animations d'image clé

Étant donné que les animations génèrent des valeurs de propriété, il existe différents types d'animations pour les différents types de propriété. Pour animer une propriété qui accepte un Double (telle que la propriété Width d'un élément), utilisez une animation qui produit des valeurs Double. Pour animer une propriété qui accepte un Point, utilisez une animation qui produit des valeurs Point, etc.

Les classes d'animation d'image clé appartiennent à l'espace de noms System.Windows.Media.Animation et obéissent à la convention d'affectation de noms suivante :

*<Type>*AnimationUsingKeyFrames

Où <Type> est le type de valeur que la classe anime.

WPF fournit les classes d'animation d'image clé suivantes.

Valeurs cibles (images clés) et temps clés

De même qu'il existe différents types d'animations d'image clé pour l'animation de différents types de propriété, il y a également différents types d'objets d'image clé : un pour chaque type de valeur animée et pour la méthode d'interpolation prise en charge. Les types d'image clé obéissent à la convention d'affectation de noms suivante :

<Type><MéthodeInterpolation> KeyFrame

Où <MéthodeInterpolation> est la méthode d'interpolation qu'utilise l'image clé et <Type> est le type de valeur que la classe anime. Une animation d'image clé qui prend en charge les trois méthodes d'interpolation aura trois types d'image clé que vous pouvez utiliser. Par exemple, vous pouvez utiliser trois types d'image clé avec un DoubleAnimationUsingKeyFrames: DiscreteDoubleKeyFrame, LinearDoubleKeyFrameet SplineDoubleKeyFrame. (Les méthodes d'interpolation sont décrites en détail dans une section ultérieure.)

L'objectif premier d'une image clé est de spécifier un KeyTime et une Value. Chaque type d'image clé fournit ces deux propriétés.

• La propriété Value spécifie la valeur cible pour cette image clé.

• La propriété KeyTime spécifie quand (dans la Durationde l'animation), la Value d'une image clé est atteinte.

Lorsqu'une animation d'image clé commence, elle effectue une itération au sein des images clés dans l'ordre défini par leurs propriétés KeyTime.

• S'il n'y a aucune image clé à l'heure 0, l'animation crée une transition entre la valeur actuelle de la propriété cible et la Value de la première image clé ; sinon, la valeur de sortie de l'animation devient la valeur de la première image clé.

• L'animation crée une transition entre la Value de la première et deuxième image clé à l'aide de la méthode d'interpolation spécifiée par la deuxième image clé. La transition commence au premier KeyTime de l'image clé et se termine lorsque le deuxième KeyTime de l'image clé est atteint.

• L'animation continue, 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é avec le plus grand temps clé égal ou inférieur à la Duration de l'animation.

Si la Duration de l'animation est Automatic ou si sa Duration est égale au temps de la dernière image clé, l'animation se termine. Sinon, si la Duration de l'animation est supérieure au temps clé de la dernière image clé, l'animation maintient la valeur de l'image clé jusqu'à ce qu'elle atteigne la fin de sa Duration. Comme toutes les animations, une animation d'image clé utilise sa propriété FillBehavior pour déterminer si elle maintient sa dernière valeur lorsqu'elle atteint la fin de sa période active. Pour plus d'informations, consultez Vue d'ensemble des comportements de minutage.

L'exemple suivant utilise l'objet DoubleAnimationUsingKeyFrames défini dans l'exemple précédent pour montrer comment fonctionnent les propriétés Value et KeyTime.

• La première image clé affecte immédiatement 0 à la valeur de sortie de l'animation.

• La deuxième image clé s'anime de 0 à 350. Elle démarre après la fin de la premier image clé (à l'heure = 0 seconde) et est lue pendant 2 secondes, en terminant à l'heure = 0:0:2.

• La troisième image clé s'anime de 350 à 50. Elle démarre à la fin de la deuxième image clé (à l'heure = 2 secondes) et est lue pendant 5 secondes, en terminant à l'heure = 0:0:7.

• La quatrième image clé s'anime de 50 à 200. Elle démarre à la fin de la troisième image clé (à l'heure = 7 secondes) et est lue pendant 1 seconde, en terminant à l'heure = 0:0:8.

• Parce que la valeur 10 secondes a été affectée à la propriété Duration de l'animation, l'animation maintient sa dernière valeur pendant deux secondes avant de terminer à = 0:0:10.

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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 mentionnent que certaines animations d'image clé prennent en charge plusieurs méthodes d'interpolation. L'interpolation d'une animation décrit comment une animation transite entre les valeurs sur 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 d'image clé. Il existe trois types de méthodes d'interpolation différents : l'interpolation linéaire, discrète et spline.

Interpolation linéaire

Avec l'interpolation linéaire, l'animation progresse à une fréquence d'interpolation constante de la durée du segment. Par exemple, si un segment de l'image clé passe de 0 à 10 sur une durée de 5 secondes, l'animation aura pour résultat les valeurs suivantes aux temps spécifiés :

Interpolation discrète

Avec l'interpolation discrète, la fonction d'animation passe d'une valeur à la suivante sans interpolation. Si un segment de l'image clé passe de 0 à 10 sur une durée de 5 secondes, l'animation aura pour résultat les valeurs suivantes aux temps spécifiés :

Notez la façon dont l'animation ne change pas sa valeur de sortie jusqu'à la fin de la durée du segment.

L'interpolation spline est plus complexe. Elle est décrite dans la section suivante.

Interpolation spline

L'interpolation spline peut être utilisée pour accomplir des effets de minutage plus proches de la réalité. Parce que les animations sont si souvent utilisées pour imiter des effets qui se produisent dans la réalité, 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 d'une manipulation au plus près des segments de minutage. Les images clés de spline vous permettent d'effectuer une animation avec l'interpolation spline. Avec d'autres images clés, vous spécifiez une Value et un KeyTime. Avec une image clé de spline, vous spécifiez également un KeySpline. L'exemple suivant illustre une image clé de spline unique pour une DoubleAnimationUsingKeyFrames. Remarquez la propriété KeySpline ; c'est ce qui rend une image clé de 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 de Bézier cubique est définie par un point de départ, un point de fin et deux points de contrôle. La propriété KeySpline d'une image clé de spline définit les deux points de contrôle d'une courbe de Bézier 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 Bézier, et le deuxième contrôle le facteur de courbe de la seconde moitié de la courbe de Bézier. La courbe résultante décrit le taux de changement pour cette image clé de spline. Plus la courbe est raide, plus l'image clé modifie rapidement ses valeurs. Lorsque la courbe s'aplatit, l'image clé modifie ses valeurs plus lentement.

Vous pouvez utiliser KeySpline pour simuler des trajectoires physiques comme des chutes d'eau ou des balles en mouvement ou appliquer d'autres effets d'« atténuation + » ou d'« atténuation – » pour mettre les animations en mouvement. Pour les effets d'intervention de l'utilisateur comme les atténuations d'arrière-plan ou le rebond du bouton de contrôle, vous pouvez appliquer l'interpolation spline pour accélérer ou ralentir le taux de changement d'une animation d'une façon spécifique.

L'exemple suivant spécifie un KeySpline de 0,1 1,0, qui crée la courbe de Bézier suivante.

Spline clé avec les 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" />

Cette image clé s'anime rapidement lorsqu'elle commence, ralentit, puis accélère à nouveau avant qu'elle ne se termine.

L'exemple suivant spécifie un KeySpline de 0.5,0.25 0.75,1.0, qui crée la courbe de Bézier suivante.

Spline clé avec les 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" />

Parce que la courbure de la courbe de Bézier change très peu, cette image clé s'anime à une fréquence presque constante ; elle ralentit quelque peu vers la fin.

L'exemple suivant utilise DoubleAnimationUsingKeyFrames pour animer la position du rectangle. Comme DoubleAnimationUsingKeyFrames utilise des objets SplineDoubleKeyFrame, la transition entre chaque valeur d'image 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 spline peut être difficile à comprendre ; des essais avec les différents paramètres peuvent vous aider. Animation de spline clé, exemple vous permet de modifier les valeurs de la spline clé et de voir son résultat dans une animation.

Combinaison des méthodes d'interpolation

Vous pouvez utiliser des images clés avec des types d'interpolation différents dans une animation d'image clé unique. Lorsque deux animations d'image clé avec des interpolations différentes se suivent, la méthode d'interpolation de la deuxième image clé est utilisée pour créer la transition de la première valeur vers la seconde.

Dans l'exemple suivant, DoubleAnimationUsingKeyFrames est créé qui utilise une 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 temps clés

Comme les autres animations, les animations d'image clé ont une propriété Duration. En plus de spécifier la Duration de l'animation, vous devez spécifier la partie de cette durée qui sera donnée à chaque image clé. Pour ce faire, décrivez un KeyTime pour chacune des images clés de l'animation. Le KeyTime de chaque image clé indique le délai au bout duquel elle arrive à son terme.

La propriété du KeyTime ne spécifie pas combien de temps dure la lecture du temps clé. La durée de lecture d'une image clé est déterminée par le moment où se termine l'image clé, le moment où se termine l'image clé qui la précède ainsi que par la durée de l'animation. Les temps clés peuvent être spécifiés comme une valeur d'heure, un pourcentage ou comme les valeurs spéciales Uniform ou Paced.

La liste suivante décrit les différentes façons de spécifier des temps clés.

Valeurs TimeSpan

Vous pouvez utiliser des valeurs TimeSpan 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 illustre une animation avec une durée de 10 secondes et quatre images clés dont les temps clés sont spécifiés comme des valeurs d'heure.

• La première image clé s'anime de la valeur de base à 100 pendant les 3 premières secondes, se terminant à l'heure = 0:0:03.

• La deuxième image clé s'anime de 100 à 200. Elle démarre après la fin de la premier image clé (à l'heure = 3 secondes) et est lue pendant 5 secondes, en terminant à l'heure = 0:0:8.

• La troisième image clé s'anime de 200 à 500. Elle démarre à la fin de la deuxième image clé (à l'heure = 8 secondes) et est lue pendant 1 seconde, en terminant à l'heure = 0:0:9.

• La quatrième image clé s'anime de 500 à 600. Elle démarre à la fin de la troisième image clé (à l'heure = 9 secondes) et est lue pendant 1 seconde, en terminant à l'heure = 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 la Durationde l'animation. En XAML, vous devez spécifier le pourcentage sous forme de nombre suivi du symbole %. Dans le code, utilisez la méthode FromPercent et passez-lui une valeur Double qui indique le pourcentage. La valeur doit être supérieure ou égale à 0 et inférieure ou égale à 100 %. L'exemple suivant illustre une animation avec une durée de 10 secondes et quatre images clés dont les temps clés sont spécifiés comme des pourcentages.

• La première image clé s'anime de la valeur de base à 100 pendant les 3 premières secondes, se terminant à l'heure = 0:0:3.

• La deuxième image clé s'anime de 100 à 200. Elle démarre après la fin de la premier image clé (à l'heure = 3 secondes) et est lue pendant 5 secondes, en terminant à l'heure = 0:0:8 (0.8 x 10 = 8).

• La troisième image clé s'anime de 200 à 500. Elle démarre à la fin de la deuxième image clé (à l'heure = 8 secondes) et est lue pendant 1 seconde, en terminant à l'heure 0:0:9 (0.9 x 10 = 9).

• La quatrième image clé s'anime de 500 à 600. Elle démarre à la fin de la troisième image clé (à l'heure = 9 secondes) et est lue pendant 1 seconde, en terminant à l'heure = 0:0:10 (1 x 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, Uniform

Utilisez la minuterie Uniform lorsque vous souhaitez que les images clés aient toutes la même durée.

Un temps clé Uniform divise le temps disponible équitablement par le nombre d'images clés pour déterminer l'heure de fin de chaque image clé. L'exemple suivant illustre une animation avec une durée de 10 secondes et quatre images clés dont les temps clés sont spécifiés comme Uniform.

• La première image clé s'anime de la valeur de base à 100 pendant les 2,5 premières secondes, se terminant à l'heure = 0:0:2,5.

• La deuxième image clé s'anime de 100 à 200. Elle démarre après la fin de la premier image clé (à l'heure = 2.5 secondes) et est lue pendant environ 2.5 secondes, en terminant à l'heure = 0:0:5.

• La troisième image clé s'anime de 200 à 500. Elle démarre à la fin de la deuxième image clé (à l'heure = 5 secondes) et est lue pendant 2.5 secondes, en terminant à l'heure = 0:0:7.5.

• La quatrième image clé s'anime de 500 à 600. Elle démarre à la fin de la deuxième image clé (à l'heure = 7.5 secondes) et est lue pendant 2.5 secondes, en 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 la minuterie Paced lorsque vous souhaitez animer à une fréquence constante.

Un temps clé Paced alloue le temps disponible d'après la longueur de chacune des images clés pour déterminer la durée de chaque image. Cela garantit le déroulement à allure constante de l'animation. L'exemple suivant illustre une animation avec une durée de 10 secondes et trois images clés dont les temps clés sont spécifiés comme 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 le dernier temps clé de l'image clé est Paced ou Uniform, son temps clé résolu aura la valeur 100 %. Si la première image clé dans une animation à plusieurs images est rythmée, son temps clé résolu aura la valeur 0. (Si la collection d'images clé contient uniquement une image clé unique qui est rythmée, son temps clé résolu aura la valeur 100 %.)

Des images clés différentes dans une animation d'image clé unique peuvent utiliser des temps clés différents.

Combinaison de temps clés, images clés désordonnées

Vous pouvez utiliser des images clés avec des types valeur KeyTime différentes dans la même animation. Et, bien qu'il soit recommandé d'ajouter les images clés dans l'ordre de leur lecture, ceci n'est pas une obligation. L'animation et le système de minuterie sont capables de résoudre des images clés désordonnées. Les images clés avec des temps clés non valides sont ignorées.

La liste suivante décrit le processus par lequel les temps clés sont résolus pour les images clés d'une animation d'image clé.

1. Résolvez des valeurs TimeSpanKeyTime.

2. Déterminez la durée totale de l'interpolation de l'animation, la durée totale nécessaire à l'animation d'image clé pour compléter une itération avancée.

   1. Si la Duration de l'animation n'est pas Automatic ou Forever, la durée totale de l'interpolation est la valeur de la propriété Duration de l'animation.

   2. Sinon, la durée totale de l'interpolation correspond à la plus grande valeur TimeSpanKeyTimespécifiée parmi ses images clés, le cas échéant.

   3. Sinon, la durée totale de l'interpolation est de 1 seconde.

3. Utilisez la valeur de la durée totale de l'interpolation pour résoudre des valeurs PercentKeyTime.

4. Résolvez la dernière image clé, si celle-ci n'a pas déjà été résolue lors des étapes précédentes. Si le KeyTime de la dernière image clé est Uniform ou Paced, sa durée résolue sera égale à la durée totale de l'interpolation.

   Si le KeyTime de la première image clé est Paced et que cette animation contient plusieurs images clés, résolvez sa valeur KeyTime à zéro ; s'il existe une seule image clé et que sa valeur KeyTime est Paced, elle est résolue à la durée totale de l'interpolation, comme décrit dans l'étape précédente.

5. Résolvez les valeurs UniformKeyTime restantes : elles reçoivent chacune une part égale du temps disponible. Au cours de ce processus, les valeurs PacedKeyTime non résolues sont traitées temporairement comme des valeurs UniformKeyTime et obtiennent une heure résolue temporaire.

6. Résolvez les valeurs KeyTime d'images clés avec des temps clés non spécifiés à l'aide des images clés déclarées les plus proches d'elles avec des valeurs KeyTime résolues.

7. Résolvez les valeurs PacedKeyTime restantes. PacedKeyTimeutilisent les valeurs KeyTime des images clés avoisinantes pour déterminer leur heure résolue. L'objectif est de garantir le déroulement à allure constante de l'animation autour de l'heure résolue de cette image clé.

8. Triez les images clés par ordre d'heure résolue (clé primaire) et ordre de déclaration (clé secondaire), c'est-à-dire utilisez un tri stable basé sur les valeurs KeyTime de l'image clé résolue.

Voir aussi

Référence

KeyTime

KeySpline

Timeline

Concepts

Vue d'ensemble de l'animation

Vue d'ensemble des storyboards

Vue d'ensemble des comportements de minutage

Autres ressources

Animation de spline clé, exemple

Animation d'image clé, exemple

Rubriques "Comment" relatives aux animations d'images clés