Animations par images clés et animations de fonctions d’accélération (XAML)

Applies to Windows and Windows Phone

Feuille de route : comment cette rubrique s’articule-t-elle par rapport aux autres ? Voir :

Les animations par images clés linéaires, les animations par images clés avec une valeur KeySpline et les fonctions d’accélération constituent trois différentes techniques pour pratiquement le même scénario : créer une animation de table de montage séquentiel (storyboard) qui est un peu plus complexe et dont le comportement est non linéaire d’un état de départ à un état de fin.

Prérequis

Lisez au préalable la rubrique Animations de table de montage séquentiel. Cette rubrique s’appuie sur les concepts d’animation expliqués dans la rubrique Animations de table de montage séquentiel mais n’y reviendra pas. Par exemple, Animations de table de montage séquentiel décrit comment cibler les animations, les tables de montage en tant que ressources, les valeurs de la propriété Timeline telles que Duration, FillBehavior, etc.

Animation par images clés

Les animations par images clés autorisent plusieurs valeurs cibles pouvant être atteintes à divers points de la chronologie. En d’autres termes chaque image clé peut spécifier une valeur intermédiaire différente, et la dernière image clé atteinte correspond à la valeur finale de l’animation. En précisant plusieurs valeurs à animer, il vous est alors possible d’effectuer des animations plus complexes. Les animations par images clés utilisent également différentes logiques d’interpolation, qui sont mises en œuvre en tant que sous-classe KeyFrame différente par type d’animation. Chaque type d’animation par images clés utilise notamment une variation Discrete, Linear, Spline et Easing de sa classe KeyFrame pour spécifier ses images clés. Par exemple, pour spécifier une animation qui cible un Double et utilise des images clés, vous pouvez déclarer des images clés avec DiscreteDoubleKeyFrame, LinearDoubleKeyFrame, SplineDoubleKeyFrame et EasingDoubleKeyFrame. Vous pouvez utiliser n’importe lequel de ces types ou tous ces types dans une collection KeyFrames unique pour changer l’interpolation chaque fois qu’une nouvelle image clé est atteinte.

Concernant le comportement de l’interpolation, chaque image clé contrôle l’interpolation jusqu’à ce que son KeyTime soit atteint. Sa propriété Value est également atteinte à ce temps clé. S’il y a d’autres images clés après cette valeur, la valeur devient la valeur de départ de l’image clé suivante dans la séquence.

Au début de l’animation, si aucune image clé avec un KeyTime dont la valeur est "0:0:0" existe, la valeur de départ est la valeur non animée de la propriété. Cela est similaire au comportement d’une animation From/To/By s’il n’y a pas de From.

La durée d’une animation par images clés est implicitement la durée égale à la valeur KeyTime la plus élevée définie dans une de ses images clés. Vous pouvez définir une propriété Duration explicite si vous voulez, mais veillez à ce qu’elle ne soit pas plus courte qu’un KeyTime dans vos images clés ou vous risquez de couper une partie de l’animation.

En plus de la propriété Duration, vous pouvez définir toutes les propriétés Timeline sur une animation par images clés, comme vous le feriez avec une animation From/To/By, car les classes de l’animation par images clés dérivent également de Timeline. À savoir :

  • AutoReverse : une fois que la dernière image clé est atteinte, les images sont répétées dans l’ordre inverse à partir de la fin. Cela double la durée apparente de l’animation.
  • BeginTime : retarde le démarrage de l’animation. La chronologie des valeurs KeyTime dans les images ne commence à compter que lorsque le BeginTime est atteint, il n’y a donc aucun risque de couper des images.
  • FillBehavior : détermine ce qui se produit lorsque la dernière image clé est atteinte. FillBehavior n’a aucun effet sur les images clés intermédiaires.
  • RepeatBehavior:
    • Si définie sur Forever, les images clés et leur chronologie se répètent indéfiniment.
    • Si définie sur un nombre d’itérations, la chronologie se répète autant de fois que ce nombre d’itérations.
    • Si définie sur un Duration, la chronologie se répète jusqu’à ce que cette durée soit atteinte. Cela risque de tronquer l’animation au cours de la séquence d’images clés, s’il ne s’agit pas d’un facteur entier de la durée implicite de la chronologie.
  • SpeedRatio (peu utilisée)

Images clés linéaires

Les images clés linéaires produisent une interpolation linaire simple de la valeur jusqu’à ce que le KeyTime de l’image soit atteint. Ce comportement d’interpolation est très similaire aux animations plus simples From/To/By décrites dans la rubrique Animations de table de montage.

Voici comment utiliser une animation par images clés pour modifier la hauteur du rendu d’un rectangle, à l’aide d’images clés linéaires. Cet exemple exécute une animation où la hauteur du rectangle augmente légèrement et de façon linéaire pendant les 4 premières secondes, puis elle augmente rapidement à la dernière seconde pour atteindre le double de la hauteur de départ.


<StackPanel>
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimationUsingKeyFrames
              Storyboard.TargetName="myRectangle"
              Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                <LinearDoubleKeyFrame Value="1" KeyTime="0:0:0"/>
                <LinearDoubleKeyFrame Value="1.2" KeyTime="0:0:4"/>
                <LinearDoubleKeyFrame Value="2" KeyTime="0:0:5"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </StackPanel.Resources>
</StackPanel>


Images clés discrètes

Les images clés discrètes n’utilisent aucune interpolation. Lorsqu’un KeyTime est atteint, la nouvelle Value est appliquée. En fonction de la propriété d’interface utilisateur qui est animée, cela produit souvent une animation qui semble « sauter ». Il s’agit du comportement esthétique voulu. Vous pouvez réduire les sauts apparents en augmentant le nombre d’images clés que vous déclarez, mais si vous recherchez une animation fluide, utilisez de préférence des images clés linéaires ou Spline.

Remarque  Les images clés discrètes sont le seul moyen d’animer une valeur qui n’est pas de type Double, Point et Color avec une classe DiscreteObjectKeyFrame. Nous reviendrons sur ce point plus loin dans cette rubrique.

Images clés Spline

Une image clé Spline génère une transition variable entre les valeurs en fonction de la valeur de la propriété KeySpline. Cette propriété précise les premier et dernier points de contrôle d’une courbe de Bézier qui décrit l’accélération de l’animation. Une propriété KeySpline définit une relation fonction-temps où le graphique fonction-temps a la forme de la courbe de Bézier. En général, vous spécifiez une valeur KeySpline dans une chaîne d’attributs raccourcie XAML qui comporte quatre valeurs Double séparées par des espaces ou des virgules. Ces valeurs sont des paires "X,Y" pour deux points de contrôle de la courbe de Bézier. "X" correspond au temps et "Y" est le modificateur de fonction de la valeur. Chaque valeur doit toujours être comprise entre 0 et 1. Sans modification des points de contrôle définis par KeySpline, la ligne droite de 0,0 à 1,1 est la représentation de la fonction dans le temps pour une interpolation linéaire. Vos points de contrôle modifient la forme de la courbe et par conséquent le comportement de la fonction dans le temps pour l’animation spline. Un graphique est probablement le meilleur moyen de le représenter visuellement. Vous pouvez exécuter l’exemple de visualiseur de spline clé Silverlight dans un navigateur pour voir comment les points de contrôle modifient la courbe et comment une animation exemple s’exécute lorsqu’elle est utilisée en tant que valeur KeySpline.

L’exemple suivant montre trois différentes images clés appliquées à une animation, la dernière étant une animation de spline clé pour une valeur Double (SplineDoubleKeyFrame). Notez la chaîne "0.6,0.0 0.9,0.00" appliquée pour KeySpline. Cela produit une courbe où l’animation semble s’exécuter d’abord lentement, puis atteint rapidement la valeur juste avant que le KeyTime soit atteint.


        <Storyboard x:Name="myStoryboard">

            <!-- 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" EnableDependentAnimation="True">

                <!-- Using a LinearDoubleKeyFrame, the rectangle moves 
                 steadily from its starting position to 500 over 
                 the first 3 seconds.  -->
                <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3"/>

                <!-- Using a DiscreteDoubleKeyFrame, the rectangle suddenly 
                 appears at 400 after the fourth second of the animation. -->
                <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4"/>

                <!-- Using a SplineDoubleKeyFrame, the rectangle moves 
                 back to its starting point. The
                 animation starts out slowly at first and then speeds up. 
                 This KeyFrame ends after the 6th
                 second. -->
                <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:6"/>

            </DoubleAnimationUsingKeyFrames>
        </Storyboard>


Images clés d’accélération

Une image clé d’accélération est une image clé où l’interpolation est appliquée et où la fonction dans le temps de l’interpolation est contrôlée par plusieurs formules mathématiques prédéfinies. Vous pouvez obtenir le même résultat avec une image clé spline et avec certains des types de fonction d’accélération, mais certaines fonctions d’accélération telles que BackEase ne peuvent pas être reproduites avec une image clé spline.

Pour appliquer une fonction d’accélération à une image clé d’accélération, vous devez définir la propriété EasingFunction en tant qu’élément de propriété dans le balisage XAML de cette image clé. Pour la valeur, spécifiez un élément objet pour l’un des types de fonction d’accélération.

Cet exemple applique un CubicEase puis un BounceEase en tant qu’images clés successives à un DoubleAnimation pour créer un effet de rebond.


        <Storyboard x:Name="myStoryboard">
            <DoubleAnimationUsingKeyFrames Duration="0:0:10"
             Storyboard.TargetProperty="Height"
             Storyboard.TargetName="myEllipse">

                <!-- This keyframe animates the ellipse up to the crest 
                     where it slows down and stops. -->
                <EasingDoubleKeyFrame Value="-300" KeyTime="00:00:02">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>

                <!-- This keyframe animates the ellipse back down and makes
                     it bounce. -->
                <EasingDoubleKeyFrame Value="0" KeyTime="00:00:06">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BounceEase Bounces="5"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

Il s’agit juste d’un exemple de fonction d’accélération. Nous allons aborder ce sujet plus en détail dans la section suivante.

Fonctions d’accélération

Les fonctions d’accélération vous permettent d’appliquer des formules mathématiques personnalisées à vos animations. Les opérations mathématiques sont souvent plus utiles pour produire des animations qui simulent la physique réelle dans un système de coordonnées 2-D. Par exemple, le cas peut se présenter où vous voulez qu’un objet rebondisse de façon réaliste ou se comporte comme s’il était monté sur ressorts. Vous pouvez utiliser des animations par images clés ou encore des animations From/To/By pour s’approcher de ces effets, mais cela supposerait un travail important et l’animation s’avérerait moins exacte qu’avec une formule mathématique.

Les fonctions d’accélération peuvent être appliquées aux animations de trois manières :

Voici la liste des fonctions d’accélération :

  • BackEase : réduit légèrement l’amplitude de l’animation avant qu’elle ne commence sur sa trajectoire prévue.
  • BounceEase : crée un effet de rebond.
  • CircleEase : génère une animation qui accélère ou décélère d’après une fonction circulaire.
  • CubicEase : génère une animation qui accélère ou décélère d’après la formule f(t) = t3.
  • ElasticEase : génère une animation qui évoque un ressort oscillant jusqu’à son arrêt complet.
  • ExponentialEase : génère une animation qui accélère ou décélère d’après une formule exponentielle.
  • PowerEase : génère une animation qui accélère ou décélère d’après la formule f(t) = tp, où p est égal à la propriété Power.
  • QuadraticEase : génère une animation qui accélère ou décélère d’après la formule f(t) = t2.
  • QuarticEase : génère une animation qui accélère ou décélère d’après la formule f(t) = t4.
  • QuinticEase : génère une animation qui accélère ou décélère d’après la formule f(t) = t5.
  • SineEase : génère une animation qui accélère ou décélère d’après une formule s’appuyant sur une fonction sinus.

Certaines des fonctions d’accélération ont des propriétés qui leur sont propres. Par exemple, BounceEase a deux propriétés Bounces et Bounciness qui modifient le comportement de la fonction dans le temps de cette fonction BounceEase. D’autres fonctions d’accélération telles que CubicEase n’ont pas d’autres propriétés que la propriété EasingMode propre à toutes les fonctions d’accélération et produisent toujours le même comportement de fonction dans le temps.

Certaines de ces fonctions d’accélération se chevauchent quelque peu, en fonction de la manière dont vous définissez les propriétés des fonctions d’accélération qui ont des propriétés. Par exemple, QuadraticEase fait exactement la même chose que PowerEase avec la propriété Power égale à 2. Et CircleEase est une fonction ExponentialEase avec une valeur par défaut.

La fonction d’accélération BackEase est unique, car elle peut changer la valeur en dehors de la plage normale définie par From/To ou des valeurs d’images clés. Elle démarre l’animation en changeant la valeur dans la direction opposée comme dans le cas d’un comportement From/To normal, elle revient à From ou à la valeur de départ, puis elle exécute normalement l’animation.

Vous pouvez expérimenter avec différentes fonctions d’accélération en vous appuyant sur un exemple Silverlight.

Dans un exemple précédent, nous vous avons montré comment déclarer une fonction d’accélération pour une animation par images clés. L’exemple suivant applique une fonction d’accélération à une animation From/To/By.


<StackPanel x:Name="LayoutRoot" Background="White">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation From="30" To="200" Duration="00:00:3" 
                Storyboard.TargetName="myRectangle" 
                Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                <DoubleAnimation.EasingFunction>
                    <BounceEase Bounces="2" EasingMode="EaseOut" 
                                Bounciness="2"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle x:Name="myRectangle" Fill="Blue" Width="200" Height="30"/>
</StackPanel>

Lorsqu’une fonction d’accélération est appliquée à une animation From/To/By, elle change les caractéristiques de la fonction dans le temps concernant la manière dont la valeur est interpolée entre les valeurs de From et de To sur la propriété Duration de l’animation. Sans fonction d’accélération, l’interpolation serait linéaire.

Animations avec valeurs d’objets discrètes

Un type d’animation mérite une attention particulière, car elle constitue le seul moyen d’appliquer une valeur animée à des propriétés qui ne sont pas de type Double, Point ou Color. Il s’agit de l’animation par images clés ObjectAnimationUsingKeyFrames. Créer une animation à l’aide de valeurs Object est différent, car il n’y a aucune possibilité d’interpoler les valeurs entre les images. Lorsque la propriété KeyTime de l’image est atteinte, la valeur animée est immédiatement définie avec la valeur spécifiée dans la propriété Value de l’image clé. Étant donné qu’aucune interpolation n’est possible, vous ne pouvez utiliser qu’une seule image clé dans la collection d’images clés ObjectAnimationUsingKeyFrames : DiscreteObjectKeyFrame.

La propriété Value d’une image clé DiscreteObjectKeyFrame est souvent définie à l’aide de la syntaxe de l’élément propriété, car la valeur de l’objet que vous essayez de définir n’est souvent pas exprimable en tant que chaîne pour remplir Value dans la syntaxe d’attribut. Vous pouvez cependant utiliser la syntaxe d’attribut si vous utilisez une référence telle que StaticResource.

Vous verrez une image clé ObjectAnimationUsingKeyFrames utilisée dans les modèles par défaut lorsqu’une propriété de modèle référence une ressource Brush. Ces ressources sont des objets SolidColorBrush, et pas simplement une valeur Color. D’autre part, elles utilisent des ressources qui sont définies comme des thèmes du système (ThemeDictionaries). Elles peuvent être attribuées directement à une valeur de type Brush telle que la propriété TextBlock.Foreground et elles n’ont pas besoin de recourir au ciblage indirect. Mais étant donné qu’un objet SolidColorBrush n’est pas une propriété Double, Point ou Color, vous devez utiliser une image clé ObjectAnimationUsingKeyFrames pour utiliser la ressource.


    <Style x:Key="TextButtonStyle" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <TextBlock x:Name="Text"
                            Text="{TemplateBinding Content}"/>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ApplicationPointerOverForegroundThemeBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ApplicationPressedForegroundThemeBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
...
                           </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Vous pouvez également utiliser ObjectAnimationUsingKeyFrames pour animer des propriétés qui utilisent une valeur d’énumération. Voici un autre exemple de style nommé tiré des modèles Windows Runtime par défaut. Notez la façon dont il définit la propriété Visibility qui prend une constante d’énumération Visibility. Dans ce cas, vous pouvez définir la valeur à l’aide de la syntaxe d’attribut. Vous avez uniquement besoin du nom non qualifié de la constante d’une énumération pour définir une propriété avec une valeur d’énumération, par exemple "Collapsed".


<Style x:Key="BackButtonStyle" TargetType="Button">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="Button">
          <Grid x:Name="RootGrid">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal"/>
...           <VisualState x:Name="Disabled">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame Value="Collapsed" KeyTime="0"/>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
...
          </VisualStateManager.VisualStateGroups>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Vous pouvez utiliser plusieurs images clés DiscreteObjectKeyFrame pour un ensemble d’images ObjectAnimationUsingKeyFrames. Il peut être intéressant de créer une animation « diaporama » en animant la valeur de la propriété Image.Source. Cela peut servir d’exemple de scénario lorsque plusieurs valeurs d’objet peuvent être utiles.

Rubriques associées

Feuille de route pour la création d’applications en C#, C++ ou VB
Syntaxe du chemin de propriété
Vue d’ensemble des propriétés de dépendance
Storyboard
Storyboard.TargetProperty

 

 

Afficher:
© 2014 Microsoft