Accentsconagua
Share
Le langage Material Design a été créé pour résoudre les problèmes de conception à plat sur des écrans plus petits en fournissant des repères visuels aux éléments interactifs. Dans cet article, vous apprendrez certains des concepts fondamentaux de l'animation et leur utilisation pour donner aux éléments une sensation naturelle et réaliste. Vous verrez comment utiliser ces idées pour ravir vos utilisateurs tout en les aidant à comprendre l'interface utilisateur de votre application..
Google suggère que toutes les animations soient réactives, naturelles, conscientes et intentionnelles. Les objets à l'écran doivent agir comme s'ils étaient composés de matériaux spécifiques, avec leur poids et leur volume propres, qui dictent la manière dont ils se déplacent et agissent à l'écran..
Les animations qui se produisent doivent être directement corrélées à une action et doivent se sentir utiles et vivantes. Ils doivent avoir un sens et aider à guider l'utilisateur dans votre application en ayant un but et en servant ce but. Les animations doivent créer un contexte pour vos utilisateurs et les aider à guider leurs yeux sur l'écran pour qu'ils sachent ce qu'il est possible de faire avec votre application..
Motion devrait être davantage préoccupé par le temps qu'il faut pour aller d'un point A à un point B, plutôt que par la distance à parcourir. Les distances changeront en fonction de la taille de l'écran, mais la vitesse d'un objet ajoutera de l'importance et aidera l'utilisateur à comprendre ce qui se passe..
Lorsqu'un objet doit être supprimé et qu'un autre doit être ajouté à l'écran (par exemple, un bouton permettant de passer de la lecture à la pause), vous devez alors transformer le premier objet en un second. De même, vous pouvez signaler un changement important dans un objet en modifiant la couleur et l'alpha de l'élément à l'écran. De cette façon, les utilisateurs sont informés de ce qui a changé et vous pouvez mettre en valeur les éléments disponibles dans vos applications pour que les utilisateurs puissent interagir.
Le livre est l’une des meilleures références pour comprendre les animations naturelles. L'illusion de la vie par Frank Thomas et Ollie Johnston, qui a un chapitre détaillant les principes d'animation utilisés par Disney dans leurs films d'animation. Thomas et Johnston exposent 12 principes fondamentaux dans leur livre. Dans cette section, nous aborderons quelques-uns de ces principes et leurs liens avec la conception de matériaux..
Lorsqu'un objet progresse dans une action, il affiche des modifications dans sa forme en fonction du matériau qui le compose..
Ce concept est représenté par le principe Squash et Stretch, qui peut être mieux illustré en pensant à une balle qui rebondit. Lorsque des forces externes agissent sur le ballon, telles que la gravité ou l'accélération vers le haut, le ballon s'étire. Lorsque l'objet heurte le sol, il se tassera et s'écrasera vers la surface. Les objets qui se déplacent et interagissent avec les surfaces de votre application doivent utiliser cette idée afin de donner l'illusion de poids et de volume à votre objet lorsqu'il se déplace..
Aucune action majeure ne devrait se produire à l'improviste. Lors de l'exécution d'une animation dans vos applications, vous devez avoir une autre action, plus petite, menant à l'animation principale. Ce principe s'appelle anticipation et permet d'éviter que votre utilisateur demande: "Pourquoi est-ce arrivé?" Le mouvement naturel commence généralement par un échauffement plutôt que par un simple début. Sous Android, vous pouvez utiliser le AnticipateInterpolator classe pour créer une animation qui parcourt d'abord une petite distance avant d'aller de l'avant.
Le but de la mise en scène est de rendre votre contenu clair et compréhensible pour vos utilisateurs. Votre interface utilisateur et vos animations doivent sembler naturelles et ancrées à une tâche ou à un concept de base, au lieu de laisser votre utilisateur incertain du fait que quelque chose s'est passé d'une manière particulière. Vous ne devez effectuer qu'une action majeure à la fois pour que les choses restent simples et délibérées.
Lorsqu'un objet en mouvement s'arrête, il ne s'arrête pas tout d'un coup (à moins de toucher un autre objet solide, mais c'est là que Stretch et Squash entrent en jeu). Les appendices d'un objet continueront à bouger pendant une courte période après que le noyau de l'objet se soit arrêté.
Lors de la création d'animations Matériau, vous devez essayer d'utiliser deux positions différentes: le point d'arrêt souhaité et l'autre un peu plus loin, auquel votre animation peut complètement s'arrêter puis revenir à votre position finale. Cela empêche votre animation de paraître plate et mécanique. Ce type d’animation peut être réalisé en utilisant le BounceInterpolator ou Dépassement d'Interpolator Des classes.
Les mouvements naturels ne se produisent pas à une vitesse constante, pas plus que vos animations.
Lorsqu'un objet se déplace hors du champ de vision et entre dans l'écran, il doit le faire rapidement puis ralentir lorsqu'il arrive à sa position finale. Le mouvement rapide captera l’attention de votre utilisateur et lui laissera suffisamment de temps pour remarquer où il se termine..
Inversement, un objet quittant l'écran doit démarrer lentement et s'accélérer au fur et à mesure qu'il quitte l'écran. Cela donnera à votre utilisateur suffisamment de temps pour remarquer que l'objet bouge et, à mesure qu'il accélère, il comprendra qu'il doit cesser de se soucier de cet élément à l'écran..
Lorsqu'un objet se déplace d'une position sur l'écran à une autre, sans quitter l'écran à aucun moment, vous devez combiner ces deux idées afin que l'utilisateur voie ce qui se passe pendant que votre animation conserve une sensation naturelle. Ce principe est également appliqué aux listes, car elles défilent rapidement lorsqu'un utilisateur les lance, puis ralentissent jusqu'à ce qu'elles s'arrêtent. Quand une liste saute entre les sections, elle devient moins immersive et semble mécanique. Vous pouvez utiliser le LinearOutSlowInInterpolator, FastOutLinearInInterpolator, ou FastOutSlowInInterpolator ajouter ces effets d'animation.
À de très rares exceptions près, les mouvements naturels se produisent sous forme d'arcs plutôt que de lignes droites précises. Lorsque vous déplacez des objets sur l’écran, en plus du principe d’entrée et de sortie lente, vous devez essayer de déplacer l’objet dans une trajectoire en arc de cercle afin d’éviter une sensation mécanique et non naturelle dans votre animation. Vous pouvez utiliser Android ArcMotion objet pour déplacer vos objets le long d'un chemin courbe.
Les actions secondaires sont des actions plus petites et plus simples qui soutiennent l'idée de l'action principale. Les actions secondaires ne doivent pas occulter ni paraître plus intéressantes que l'action principale, car elles existent simplement.
Un exemple d'action secondaire serait lorsque vous ouvrez le tiroir de navigation dans une application Android. Alors que le tiroir coulissant est l’action principale, l’animation icône représentant un hamburger avec une flèche est un simple effet qui souligne ce qui se passe sans occulter le principal changement à l’écran..
Lorsque vous travaillez avec des animations, le timing est primordial. Si une animation se déplace trop lentement ou trop rapidement, l'utilisateur remarquera que quelque chose semble "inactif".
Il est important de se rappeler que Material Design appelle les objets à apparaître comme s'ils étaient constitués d'une sorte de matériau. Si un objet ressemble à du papier glissant sur une surface, il ne doit pas être déplacé rapidement sur l'écran. Naturellement, il n'y a pas de formule sûre pour la vitesse d'animation dans les applications, mais avec un peu de temps et de pratique, vous devriez être capable de créer des animations bien synchronisées qui correspondent au thème et au but de votre application..
Maintenant que vous connaissez les concepts majeurs de Material Motion et certains des principes fondamentaux de l'animation, commencez à vous amuser avec les différents outils disponibles pour animer votre application et ajoutez un peu de pop supplémentaire pour ravir vos utilisateurs..
Si vous souhaitez en savoir plus sur la création d'animation sous Android, consultez le cours approfondi Animer votre application Android d'Ashraff Hathibelagal, ici sur Envato Tuts+.
Ou consultez nos autres tutoriels sur l'animation sous Android!
