Animations de mouvement naturels

Cet article fournit une brève vue d’ensemble de l’espace NaturalMotionAnimation et explique comment réfléchir conceptuellement à l’utilisation de ces types d’animations dans votre interface utilisateur.

Faire du mouvement se sentir familier et naturel

Les applications intéressantes sont celles qui créent des expériences qui capturent et conservent l’attention de l’utilisateur, et aident à guider les utilisateurs dans les tâches. Le mouvement est le facteur de différenciation clé qui sépare une interface utilisateur d’une expérience utilisateur , ce qui permet d’établir une connexion entre les utilisateurs et l’application avec laquelle ils interagissent. Plus la qualité de la connexion est bonne, plus l’engagement et la satisfaction des utilisateurs finaux augmentent.

Un mouvement peut aider à créer cette connexion en créant des expériences qui semblent familières aux utilisateurs. Les utilisateurs ont une attente inconsciente pour la façon dont ils perçoivent le mouvement basé sur des expériences réelles. Nous voyons comment les objets glissent sur le sol, tombent de la table, rebondissent les uns contre les autres et oscillent avec un ressort. Mouvement qui tire parti de cette attente en étant basé sur la physique du monde réel et paraît plus naturel à nos yeux. Le mouvement devient plus naturel et interactif, mais plus important encore, toute l’expérience devient plus mémorable et délicieuse.

Le résultat net est un engagement et une rétention des utilisateurs plus élevés avec votre application.

Contrôle d’équilibrage et dynamisme

Dans l’interface utilisateur traditionnelle, KeyFrameAnimations est la principale façon de décrire le mouvement. KeyFrames ont fourni un contrôle optimal aux concepteurs et aux développeurs pour définir le début, la fin et l’interpolation. Bien que cela soit très utile dans de nombreux cas, les animations d’images clés ne sont pas très dynamiques ; le mouvement n’est pas adapté et ressemble de manière constante sous toutes les conditions.

À l’autre extrémité du spectre, il y a souvent des simulations dans les moteurs de jeu et de physique. Ces expériences sont souvent les plus réalistes et dynamiques avec lesquelles les utilisateurs interagissent, créant ce sentiment d'ambiance et de hasard que les utilisateurs voient chaque jour. Bien que cela rend le mouvement plus actif et dynamique, les concepteurs et les développeurs ont moins de contrôle, ce qui rend plus difficile l’intégration dans l’interface utilisateur traditionnelle.

NaturalMotionAnimationexiste pour aider à combler cette division – permettant un équilibre de contrôle pour les éléments importants d’une animation comme le début/la fin, mais maintenir le mouvement qui semble et se sent naturel et dynamique.

Utilisation de NaturalMotionAnimations

Dans WinUI et le Kit de développement logiciel (SDK) d’application Windows, vous avez accès à une expérience de mouvement naturelle : animations de printemps. Consultez les animations Spring pour un aperçu plus approfondi des ressorts.

Ce type de mouvement est obtenu à l’aide du nouveau NaturalMotionAnimation , un nouveau type d’animation centré sur le fait de permettre aux développeurs de créer un mouvement de sentiment plus familier et naturel dans leur interface utilisateur, avec un équilibre de contrôle et de dynamisme. Ils exposent les fonctionnalités suivantes :

• Définissez les valeurs de début et de fin.
• Définissez InitialVelocity et liez-la à l’entrée avec InteractionTracker.
• Définir des propriétés spécifiques au mouvement (telles que DampingRatio pour les ressorts).)

Formule générale pour commencer :

1. Créez l'animation NaturalMotionAnimation à partir du Compositor en utilisant l'une des méthodes Create.
2. Définissez les propriétés de l’animation.
3. Transmettez NaturalMotionAnimation en tant que paramètre dans l'appel StartAnimation d'un CompositionObject.
   • Ou défini sur la propriété Motion d’un objet InteractionTracker InertieModifier.

Exemple de base utilisant une animation de mouvement naturel à ressort pour déplacer un visuel vers un nouvel emplacement de décalage X :

_springAnimation = _compositor.CreateSpringScalarAnimation();
_springAnimation.Period = TimeSpan.FromSeconds(0.07);
_springAnimation.DelayTime = TimeSpan.FromSeconds(1);
_springAnimation.EndPoint = 500f;
sectionNav.StartAnimation("Offset.X", _springAnimation);