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. Mieux la connexion est élevée, plus l’engagement et la satisfaction des utilisateurs finaux sont élevés.

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 sur la table, rebondissent les uns dans les autres et oscillent avec un printemps. Mouvement qui tire parti de cette attente en étant basé sur l’apparence physique réelle et se sent plus naturel dans 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 l’application.

Contrôle d’équilibrage et dynamisme

Dans l’interface utilisateur traditionnelle, KeyFrameAnimations est la principale façon de décrire le mouvement. Les images clés ont fourni le meilleur contrôle 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 adaptatif et ressemble à une condition quelconque.

À 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 dynamiques et les plus dynamiques avec lesquelles les utilisateurs interagissent , ce qui crée 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.

Remarque

NaturalMotionAnimations n’est pas destiné à remplacer les animations par images clés : il existe toujours des emplacements dans le langage Fluent design où les images clés sont recommandées. NaturalMotionAnimations est destiné à être utilisé dans des endroits où le mouvement est requis, mais les animations de trame clé ne sont pas suffisamment dynamiques.

Utilisation de NaturalMotionAnimations

À compter de Fall Creators Update, vous avez accès à une nouvelle expérience de mouvement : animations de printemps. Consultez les animations spring pour une procédure pas à pas plus approfondie 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 naturalMotionAnimation à l’aide de l’une des méthodes Create .
2. Définissez les propriétés de l’animation.
3. Transmettez naturalMotionAnimation en tant que paramètre à l’appel StartAnimation d’un Objet CompositionObject.
   • Ou défini sur la propriété Motion d’un objet InteractionTracker InertieModifier.

Exemple de base utilisant un spring NaturalMotionAnimation pour rendre un visuel « spring » à 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);