THÉORIE DE BASE
DE L'ANIMATION WEB

Il existe des animations fonctionnelles qui rendent l'interface plus intuitive et conviviale. Ce type d'animation est utilisé dans les interfaces de produits et les applications mobiles. L'animation décorative, quant à elle, est surtout utilisée dans les pages d'atterrissage ou les projets spéciaux, afin d'attirer l'attention du spectateur, de rendre le projet plus intéressant et d'évoquer certaines émotions.

La vitesse d'animation reflète le rapport entre la distance parcourue par un élément et le temps qu'il a mis pour le faire. La vitesse comprend également tous les changements que l'élément subit du début à la fin. C'est l'une des composantes clés de l'animation, car elle est responsable de la dynamique générale et de l'ambiance que vous essayez de créer. La création d'animations est un processus assez créatif, et vous constaterez rapidement qu'il n'est pas très différent de la réalisation de votre propre film.

Lors de la conception d'une animation, il est important de réfléchir :

• Durée d'utilisation
• La vitesse à laquelle l'effet d'animation se produit
• Vitesse à laquelle l'élément commencera et terminera le mouvement

Quelle durée choisir pour que l'animation soit soignée ? Il n'y a pas de réponse exacte. Il est important de ne pas faire attendre l'utilisateur sur le résultat du mouvement, mais aussi de ne pas rendre l'animation trop rapide. Le spectateur doit avoir le temps de comprendre où l'élément est apparu à l'écran et comment il s'est déplacé. En général, l'animation doit sembler naturelle.

Les animations plus dynamiques conviennent à l'apparition de petits éléments tels que des textes, des listes, des cartes ou des boutons. Les grands éléments sont généralement animés de manière plus fluide. La durée dépend également de l'espace occupé par l'animation. Une vitesse élevée convient mieux aux micro-mouvements, car plus la vitesse est élevée, plus elle requiert d'attention, ce qui distrait l'utilisateur du reste du contenu.

La distance de mouvement dans les animations web est généralement courte :

• Éléments révélés par transparence (cartes, listes, images)
• Effets de survol (animation au passage de la souris) pour les boutons et les cartes : Zoom, déplacement, changement de couleur
• Pop-up (par exemple, agrandissement d'une photo)
• Diaporama animé

Bien que les paramètres d'animation puissent varier en fonction du projet, la vitesse d'animation tend à suivre un ensemble de règles universelles. L'animation est plus confortable à percevoir dans les limites spécifiées ci-dessous, utilisez-les comme guide et vous ne vous tromperez pas.

Il s'agit de la plage de valeurs moyenne pour animer la plupart des éléments, ni trop rapide, ni trop lente. Cette plage est suffisante pour animer du texte, des tuiles, des listes et des éléments décoratifs. Augmentons l'intervalle :

Un intervalle de 0,1 seconde est perçu comme un instant, ce qui le rend adapté aux petits éléments et mouvements (survol, changement d'onglet, balayage dans les galeries), tandis que les animations de plus d'une seconde paraîtront fastidieuses. Il est bon de s'assurer que vous n'appliquez pas cette animation à un élément important de la page web.

Ces chiffres ont été révélés par une étude du Neilson Norman Group (une société de recherche et de conseil en matière d'expérience utilisateur) et du Model Human Processor.

Lorsque les propriétés d'un élément animé sont similaires à celles d'un objet physique, elles sont plus faciles à percevoir. Ces animations sont plus prévisibles, c'est pourquoi elles ne provoquent pas d'inconfort.

Elles aident à déclencher certaines associations et émotions qui sont familières à l'utilisateur. L'un des principaux moyens d'obtenir une sensation naturelle est d'imaginer comment un objet physique se comporterait s'il se déplaçait comme dans votre animation. Comment cela affecte-t-il la vitesse ?

• Par exemple, des éléments identiques se déplaceront différemment s'ils parcourent des distances différentes. Lorsque des éléments se déplacent, celui dont la distance est la plus courte s'arrête en premier.
• Les éléments dont la masse varie se déplacent également différemment, les plus gros ayant tendance à se déplacer plus lentement. S'il s'agissait d'un objet physique, sa masse l'empêcherait de se déplacer plus rapidement.

Ces règles sont étroitement liées à notre perception. Il est important de se rappeler que les objets physiques ont toujours un début et une fin à leur mouvement. À un moment donné, ils accélèrent (par exemple, au début, s'ils sont poussés) et à un moment donné, ils ralentissent (par exemple, à la fin de la trajectoire). L'animation Web transmet ces propriétés à l'aide de la fonction Easing.

L'assouplissement est la technique la plus importante dans la conception d'une animation, car elle confère aux éléments authenticité, caractère et dynamique.

L'assouplissement est généralement représenté par un graphique de la relation entre la distance du mouvement (axe Y) et le temps qu'il faut pour la parcourir (axe X). Si l'on apprend à les lire et à les composer correctement, cela aidera les concepteurs à expliquer plus clairement la tâche au développeur.

Le mouvement linéaire est celui qui paraît le moins naturel. Imaginez que la vitesse de l'élément ne change pas tout au long de l'animation, comme s'il n'y avait pas de gravité et de friction. Une telle animation paraît artificielle et bâclée.

Il existe plusieurs types d'effets d'assouplissement. Les passer en revue et apprendre à les appliquer dans vos projets vous sera certainement utile. Voici les exemples les plus courants d'assouplissement et leurs graphiques :

Ce type d'assouplissement est le plus courant. Les transitions Ease-In-Out consistent à accélérer doucement un élément au début et à le ralentir à la fin du mouvement. Les animations ont l'air les plus naturelles de cette manière : L'élément accélère, termine le mouvement et s'arrête.

Dans ce cas, l'élément accélère au début et a une vitesse d'animation constante. Ce type d'animation ressemble à un lancement de fusée.

Dans les animations Ease-Out, l'élément a un mouvement rapide prononcé au début et un mouvement d'arrêt en douceur à la fin.

L'assouplissement asymétrique vous permet d'appliquer des paramètres plus subtils pour transmettre avec précision des propriétés physiques. Dans ce cas, les points d'accélération et de décélération ont leur propre dynamique et les graphiques avec les courbes d'animation peuvent être complètement différents. Par exemple, un élément peut avoir une accélération douce au début et un arrêt rapide à la fin.

Lorsque des objets entrent en collision, ils peuvent rebondir l'un sur l'autre ou s'étirer dans différentes directions. En conception d'animation, ces effets sont appelés rebond et élasticité. Ces effets donnent au mouvement un aspect naturel.

L'amplitude du mouvement dépend de l'idée générale du projet. Lors de la conception, comparez votre élément à un objet physique pour savoir exactement comment construire l'animation. Si vous souhaitez obtenir l'effet d'une balle molle légère qui saute, l'accélération de l'élément devra être douce, tandis que son rebond sur la surface devra être important. En revanche, si vous imaginez une boule de métal qui tombe, sa descente sera beaucoup plus rapide, tandis que son rebond sera à peine perceptible.

La souplesse de l'animation, le rebond et la vitesse créent une certaine dynamique. En apprenant à utiliser ces outils, vous saurez comment donner le ton à votre animation.

Les courbes de Bézier sont utilisées pour tracer l'accélération d'un élément. Une courbe de Bézier est une courbe mathématique sur un graphique contenant les axes Y (distance) et X (vitesse), qui reflètent la distance parcourue par l'élément dans l'espace et le temps qu'il lui a fallu pour le faire. En ajustant la courbe, vous pouvez ajuster la vitesse à laquelle l'élément parcourt les différentes parties de sa trajectoire.

Il existe deux types de courbes de Bézier : les courbes quadratiques et les courbes cubiques. Les coordonnées du premier et du dernier point sont clairement définies et se situent sur la courbe. Les autres points sont ajustables et se situent en dehors de la ligne. Le déplacement des points transforme la courbe, créant une forme lisse.

Pour apprendre à lire les graphiques et comprendre comment les angles de la courbe indiquent la dynamique du mouvement, dessinons deux graphiques similaires mais légèrement différents.

Il n'existe pas de valeurs universelles pour les points d'une courbe qui permettraient d'obtenir une animation parfaite. L'important est d'expérimenter et de trouver progressivement la dynamique de mouvement qui convient à chaque cas. Une fois que vous aurez appris à lire les graphiques, vous pourrez utiliser ces connaissances de manière plus professionnelle. Pour vous faciliter la tâche, voici quelques services qui aident les concepteurs à visualiser les animations :

cubic-bezier
Ce service permet de déplacer la courbe, de reproduire ses paramètres et de sauvegarder le résultat souhaité. Pour simplifier le transfert du projet d'animation à l'équipe de développement, vous pouvez copier les valeurs des points de coordonnées et les partager avec le développeur.

easings.net
Ce service contient des projets d'animation terminés, qui peuvent s'avérer utiles en tant qu'exemples prêts à l'emploi contenant les bonnes valeurs.

Il existe différents types d'animations sur Tilda. Sur Zero Block , les concepteurs disposent d'un outil avancé qui leur permet de créer des effets d'animation personnalisés, et il existe des blocs de base avec des effets d'animation de base prédéfinis.

Vous pouvez en savoir plus sur l'animation sur Tilda ici.

Nous voulions donner aux concepteurs non professionnels la possibilité d'ajouter des animations cool à leurs projets, c'est pourquoi nous avons ajouté des animations prédéfinies aux blocs. Les paramètres que nous avons utilisés sont, à notre avis, parfaitement équilibrés tout en restant universels. Il vous suffit d'activer l'animation pour l'élément souhaité (en-tête, sous-titre, etc.) dans le panneau Paramètres du bloc.

Les animations ont été mises au point par nos concepteurs. La vitesse n'est ni trop rapide, ni trop lente, et les éléments se succèdent harmonieusement. Voyons comment fonctionnent les paramètres d'animation de Tilda en prenant l'exemple d'une des couvertures :

Dans l'exemple, nous avons attribué le même style d'animation - apparaître d'en bas - à tous les éléments afin de voir le mouvement plus clairement.

Nous avons veillé à déterminer à quelle vitesse les éléments apparaîtraient l'un après l'autre, avec quel retard et quel déplacement. Si vous regardez attentivement les valeurs sur la couverture ci-dessus, vous pouvez le constater :

• Le premier élément à apparaître est le plus grand (l'en-tête est le plus grand, c'est donc l'élément clé).
• Le titre est suivi d'une description, qui n'a qu'une importance secondaire. La vitesse d'animation est ici plus élevée.
• Le bouton apparaît en dernier, et sa vitesse d'apparition est plus rapide que celle des deux textes.

Le style d'assouplissement est le même pour tous les éléments avec une animation prédéfinie :

Le graphique montre que les éléments accélèrent rapidement au début et décélèrent progressivement à la fin.

La chorégraphie permet de créer un rythme dans l'animation. Ce rythme est similaire au rythme musical, car il détermine le caractère de l'œuvre en question. Ce qui importe ici, c'est que les mouvements de l'animation soient clairement définis et non monotones (avec le même intervalle de temps entre eux).

Animation parallèle. Éléments d'animation qui ont la même vitesse et le même temps, ce qui les fait ressembler à un seul groupe.

Animation retardée. Il s'agit d'une animation contenant un petit délai entre les éléments qui apparaissent, l'élément suivant se déplaçant un peu plus vite que le précédent. Pour que les éléments fassent toujours partie du même groupe, l'intervalle de temps doit être faible (par exemple 0,3 seconde).

Regroupement d'éléments. Vous pouvez regrouper des éléments et combiner des animations parallèles et différées. Par exemple, vous pouvez faire apparaître tous les textes de l'en-tête en même temps et faire apparaître les boutons en différé.

La séquence d'animation dépend de l'importance de l'élément, puisqu'il y a des éléments égaux et des éléments clés.

L'accent visuel sera mis sur l'élément clé, tandis que le reste sera unifié autant que possible. Par exemple, le titre de la page peut être l'élément principal, tandis que les sous-titres et les images seront secondaires. Une façon de mettre en évidence l'élément clé est de montrer le titre en premier, suivi d'une pause et de l'apparition des éléments secondaires à un rythme plus lent.

Sur une page web, il s'agit généralement de listes, de galeries de photos, de motifs, d'éléments ayant un but similaire. Ils peuvent apparaître ensemble ou l'un après l'autre. Lorsqu'ils apparaissent l'un après l'autre, l'animation de l'apparition doit être la même.

Les photos d'une galerie font partie de la même entité. Il est important que l'attention du spectateur ne soit pas dispersée. Vous devez veiller à ce que l'animation soit simple, uniforme et suffisamment rapide.

Ce type d'animation n'est pas destiné à attirer l'attention, car il ne fait qu'ajouter de la dynamique pendant le défilement de la page. Une bonne technique pour rassembler visuellement les différents éléments d'un groupe consiste à commencer l'animation du deuxième élément avant la fin de la première animation. Par exemple, l'animation du deuxième élément commence avant la fin de la première animation :

Les éléments clés, quant à eux, donnent le ton et concentrent l'attention de l'utilisateur. Il peut s'agir d'un seul élément ou de plusieurs éléments (qui sont alors regroupés). Par exemple, vous pouvez créer un grand titre lumineux, le faire apparaître rapidement sans délai, mais avec un ralentissement à la fin. Les autres éléments peuvent apparaître en douceur et après le titre, mais avec un long délai.

L'animation est un outil qui permet d'ajouter de l'expression, de l'emphase et de contrôler l'attention. Il s'agit d'un outil très puissant, qui est souvent utilisé de manière inappropriée. En matière d'animation, la tentation est grande d'appliquer toutes les techniques que l'on connaît à un seul projet. Cela tourne généralement mal, car l'attention du spectateur est déplacée par le mouvement des images et des textes, et il devient très difficile de s'immerger dans le contenu. Alors, comment savoir si l'on n'en fait pas trop ?

L'équilibre de l'animation dans le projet fait référence au nombre d'éléments animés qui ne provoquent pas une sensation de controverse lors de la visualisation de la page. Ajouter trop d'animations est une erreur courante. Afin de ne pas supprimer les animations inutiles à la fin, il est préférable de déterminer la quantité d'animation dont vous avez besoin dès le début, en suivant les règles suivantes :

N'animez pas tous les éléments de votre projet. Une dynamique trop forte vous fatigue et déconcentre l'observateur. Pour commencer, déterminez les éléments à mettre en valeur, deux suffisent généralement. Par exemple, les titres et les photos de la galerie.

Contrôler la qualité. Si vous ajoutez une animation à un projet, il est important de s'assurer qu'elle fonctionne correctement et qu'elle ne se fige pas. L'animation nécessite beaucoup de ressources système et elle sera lente ou intermittente si l'unité centrale est fortement sollicitée. Les utilisateurs seront loin d'être impressionnés et il n'y aura pas de facteur "wow". Il est donc essentiel que vous.. :

• Ne pas animer trop d'éléments
• Tester le site web sur des ordinateurs de faible puissance
• Au lieu de l'animation simultanée de plusieurs éléments, utilisez une séquence avec un court délai.
• Ne téléchargez pas d'images lourdes sur le site web

Maintenir la hiérarchie. Appliquez la même animation aux éléments de même valeur sur l'ensemble du site web. En voici un exemple :

• Même style d'apparence de l'en-tête
• Même style au survol (par exemple, l'apparence de l'ombre sous le bouton au survol de la souris)

Maintenir le style. Appliquez le même style d'animation à la hiérarchie. Par exemple, vous pouvez décider que tous les titres de section seront introduits en fondu par le bas, tandis que les images et les légendes seront introduites par le côté.

Une quantité limitée d'animation vous permet d'éviter de tomber dans l'excès et de vous embrouiller dans les styles au début. Assurez-vous que la quantité minimale d'animation sur la page n'est pas suffisante pour vous, et essayez ensuite d'en ajouter.

L'animation rend le projet plus intéressant et soutient son style, son ambiance et son caractère. Mais elle peut être préjudiciable si vous ne respectez pas les règles de base :