Découvrez comment adoucir et pondérer vos animations.
Dans la nature, rien ne se déplace linéairement d'un point à un autre. En réalité, les choses ont tendance à s'accélérer ou à ralentir au fur et à mesure qu'elles avancent. Notre cerveau est conçu pour s'attendre à ce type de mouvement, alors lorsque vous créez une animation, vous devez l'utiliser à votre avantage. Les mouvements naturels permettent aux utilisateurs de se sentir plus à l'aise avec vos applications, ce qui se traduit par une meilleure expérience globale.
Résumé
- Le lissage de vitesse rend vos animations plus naturelles.
- Choisissez des animations de lissage de vitesse pour les éléments de l'interface utilisateur.
- Évitez les animations de type lissage à l'ouverture ou à l'ouverture, sauf si elles sont courtes, car elles ont tendance à ralentir les utilisateurs finaux.
Dans l'animation classique, le terme "mouvement qui démarre lentement et accélère" est "lent", tandis que celui qui démarre rapidement et ralentit est "lent". Les termes les plus couramment utilisés sur le Web sont "assouplir" et "assouplir", respectivement. Parfois, les deux sont combinés, ce qui est appelé « assoupissement à l'intérieur ». Le lissage de vitesse consiste à rendre l'animation moins sévère ou moins prononcée.
Lissage de vitesse des mots clés
Avec les animations et les transitions CSS, vous pouvez choisir le type de lissage de vitesse à utiliser pour vos animations. Vous pouvez utiliser des mots clés qui affectent le lissage de vitesse (ou timing, comme on l'appelle parfois) de l'animation en question. Vous pouvez également personnaliser complètement le lissage de vitesse, ce qui vous donne beaucoup plus de liberté pour exprimer la personnalité de votre application.
Voici quelques mots clés que vous pouvez utiliser dans CSS:
linearease-inease-outease-in-out
Source: CSS Transitions, W3C
Vous pouvez également utiliser un mot clé steps, ce qui vous permet de créer des transitions comportant des étapes distinctes. Toutefois, les mots clés listés ci-dessus sont les plus utiles pour créer des animations naturelles.
Animations linéaires
Les animations sans lissage de vitesse sont qualifiées de linéaire. Le graphe d'une transition linéaire ressemble à ceci:
Au fur et à mesure que le temps avance, la valeur augmente de façon égale. Avec le mouvement linéaire, les choses ont tendance à sembler robotiques et surnaturel, et c'est quelque chose que les utilisateurs trouvent troublant. En règle générale, vous devez éviter les mouvements linéaires.
Que vous codiez vos animations en CSS ou en JavaScript, vous constaterez qu'il existe toujours une option pour le mouvement linéaire.
Afficher une animation linéaire
Pour obtenir l'effet ci-dessus avec CSS, le code ressemblerait à ceci:
transition: transform 500ms linear;
Animations de lissage à l'éloignement
Le lissage de vitesse entraîne un démarrage plus rapide de l'animation que les animations linéaires et une décélération à la fin.
Le lissage de vitesse est généralement le meilleur pour le travail d'interface utilisateur, car le démarrage rapide donne à vos animations un sentiment de réactivité, tout en permettant un ralentissement naturel à la fin.
Afficher une animation de lissage à l'éloignement
Il existe de nombreuses façons d'obtenir un effet de lissage de vitesse, mais la plus simple est le mot clé ease-out en CSS:
transition: transform 500ms ease-out;
Animations de lissage à l'approche
Les animations d'accélération à l'ouverture commencent lentement et se terminent rapidement, ce qui est à l'opposé des animations de lissage de vitesse.
Ce type d'animation ressemble à une grosse pierre qui tombe, et elle démarre lentement et frappe rapidement le sol avec un coup de poing mortel.
D'un point de vue d'interaction, cependant, les lissages peuvent sembler un peu inhabituels en raison de leur fin brusque ; les choses qui se déplacent dans le monde réel ont tendance à ralentir au lieu de s'arrêter soudainement. Les lissages de vitesse ont également un effet néfaste, comme une sensation de faiblesse au démarrage, ce qui a un impact négatif sur la perception de la réactivité de votre site ou application.
Afficher une animation de lissage à l'ouverture
Pour utiliser une animation de lissage à l'ouverture, de la même manière que les animations linéaires et le lissage de vitesse, vous pouvez utiliser son mot clé:
transition: transform 500ms ease-in;
Animations de lissage à l'approche/l'éloignement
Ce lissage de vitesse équivaut à accélérer et ralentir une voiture. Utilisé judicieusement, il peut produire un effet plus spectaculaire que simplement un lissage de vitesse.
N'utilisez pas une durée d'animation trop longue, en raison du ralentissement du démarrage du lissage à l'ouverture. Une plage de 300 à 500 ms est généralement appropriée, mais le nombre exact dépend fortement de l'aspect général de votre projet. Cela dit, en raison du démarrage lent, du milieu et de la fin, le contraste est accru dans l'animation, ce qui peut être très satisfaisant pour les utilisateurs.
Afficher une animation de lissage à l'éloignement
Pour obtenir une animation de lissage à l'éloignement, vous pouvez utiliser le mot clé CSS ease-in-out:
transition: transform 500ms ease-in-out;