Partager via

Animations basées sur le temps

  • Article

Lorsqu’un composant ou une expérience utilisateur entière change, les utilisateurs finaux l’observent souvent de deux façons : au fil du temps ou instantanément. Sur la plateforme Windows, l’ancien est préféré à ce dernier : les expériences utilisateur qui changent instantanément confondent et surprisent les utilisateurs finaux, car ils ne peuvent pas suivre ce qui s’est passé. L’utilisateur final perçoit ensuite l’expérience comme jarring et unnatural.

Au lieu de cela, vous pouvez modifier votre interface utilisateur au fil du temps pour guider l’utilisateur final ou les informer des modifications apportées à l’expérience. Sur la plateforme Windows, cela s’effectue à l’aide d’animations basées sur le temps, également appelées KeyFrameAnimations. KeyFrameAnimations vous permet de modifier une interface utilisateur au fil du temps et de contrôler chaque aspect de l’animation, notamment la façon dont elle démarre et son état final. Par exemple, l’animation d’un objet à une nouvelle position sur plus de 300 millisecondes est plus agréable que le « téléportage » instantanément. Lorsque vous utilisez des animations plutôt que des modifications instantanées, le résultat net est une expérience plus agréable et attrayante.

Types d’animations basées sur le temps

Il existe deux catégories d’animations basées sur le temps que vous pouvez utiliser pour créer de belles expériences utilisateur sur Windows :

Animations explicites : comme le nom signifie, vous démarrez explicitement l’animation pour effectuer des mises à jour. Animations implicites : ces animations sont lancées par le système en votre nom lorsqu’une condition est remplie.

Pour cet article, nous allons découvrir comment créer et utiliser des animations basées sur le temps explicites avec KeyFrameAnimations.

Pour les animations explicites et implicites basées sur le temps, il existe différents types correspondant aux différents types de propriétés de CompositionObjects que vous pouvez animer.

  • ColorKeyFrameAnimation
  • QuaternionKeyFrameAnimation
  • ScalarKeyFrameAnimation
  • Vector2KeyFrameAnimation
  • Vector3KeyFrameAnimation
  • Vector4KeyFrameAnimation

Créer des animations basées sur le temps avec KeyFrameAnimations

Avant de décrire comment créer des animations basées sur le temps explicites avec KeyFrameAnimations, examinons quelques concepts.

  • Images clés : il s’agit des « instantané » individuelles qu’une animation animera.
    • Défini en tant que paires clé &valeur. La clé représente la progression comprise entre 0 et 1, comme dans la durée de vie de l’animation, cette « instantané » prend place. L’autre paramètre représente la valeur de propriété pour l’instant.
  • Propriétés KeyFrameAnimation : options de personnalisation que vous pouvez appliquer pour répondre aux besoins de l’interface utilisateur.
    • DelayTime : heure avant le démarrage d’une animation après l’appel de StartAnimation.
    • Durée : durée de l’animation.
    • IterationBehavior : nombre ou comportement de répétition infinie pour une animation.
    • IterationCount : nombre de fois fini qu’une animation de trame clé se répète.
    • Nombre d’images clés : lisez le nombre d’images clés dans une animation d’images clés particulière.
    • StopBehavior : spécifie le comportement d’une valeur de propriété d’animation lorsque StopAnimation est appelé.
    • Direction : spécifie la direction de l’animation pour la lecture.
  • Groupe d’animations : démarrage de plusieurs animations en même temps.
    • Souvent utilisé lorsque vous souhaitez animer plusieurs propriétés en même temps.

Pour plus d’informations, consultez CompositionAnimationGroup.

Avec ces concepts à l’esprit, parlons de la formule générale pour construire un KeyFrameAnimation :

  1. Identifiez le CompositionObject et sa propriété respective que vous devez animer.
  2. Créez un modèle Type KeyFrameAnimation du compositeur qui correspond au type de propriété que vous souhaitez animer.
  3. À l’aide du modèle d’animation, commencez à ajouter des images clés et à définir des propriétés de l’animation.
    • Au moins un KeyFrame est requis (l’image clé 100 % ou 1f).
    • Il est également recommandé de définir une durée.
  4. Une fois que vous êtes prêt à exécuter cette animation, appelez StartAnimation(...) sur CompositionObject, ciblant la propriété que vous souhaitez animer. En particulier :
    • visual.StartAnimation("targetProperty", CompositionAnimation animation);
    • visual.StartAnimationGroup(AnimationGroup animationGroup);
  5. Si vous avez une animation en cours d’exécution et que vous souhaitez arrêter l’animation ou le groupe d’animations, vous pouvez utiliser ces API :
    • visual.StopAnimation("targetProperty");
    • visual.StopAnimationGroup(AnimationGroup AnimationGroup);

Examinons un exemple pour voir cette formule en action.

Exemple

Dans cet exemple, vous souhaitez animer le décalage d’un visuel de <0,0,0> à <200,0,0> sur 1 seconde. En outre, vous souhaitez voir l’animation visuelle entre ces positions 10 fois.

Animation de trame clé

Commencez par identifier l’objet CompositionObject et la propriété que vous souhaitez animer. Dans ce cas, le carré rouge est représenté par un visuel composition nommé redVisual. Vous démarrez votre animation à partir de cet objet.

Ensuite, étant donné que vous souhaitez animer la propriété Offset, vous devez créer un Vector3KeyFrameAnimation (Offset est de type Vector3). Vous définissez également les images clés correspondantes pour KeyFrameAnimation.

    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));

Ensuite, vous définissez les propriétés de KeyFrameAnimation pour décrire sa durée, ainsi que le comportement à animer entre les deux positions (actuelles et <200,0,0) 10> fois.

    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;

Enfin, pour exécuter une animation, vous devez la démarrer sur une propriété d’un Objet CompositionObject.

redVisual.StartAnimation("Offset", animation);

Voici le code complet.

private void AnimateSquare(Compositor compositor, SpriteVisual redVisual)
{ 
    Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();
    animation.InsertKeyFrame(1f, new Vector3(200f, 0f, 0f));
    animation.Duration = TimeSpan.FromSeconds(2);
    animation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
    // Run animation for 10 times
    animation.IterationCount = 10;
    redVisual.StartAnimation("Offset", animation);
}