Apprenez à adoucir et à donner de la pondération à vos animations.
Dans la nature, rien ne se déplace de façon linéaire d'un point à un autre. En réalité, les choses ont tendance à s'accélérer ou à ralentir à mesure qu'elles évoluent. Notre cerveau est programmé pour s'attendre à ce type de mouvement. Vous devez donc l'utiliser à votre avantage pour créer une animation. Les mouvements naturels améliorent l'expérience utilisateur de vos applications, ce qui améliore l'expérience globale des utilisateurs.
Résumé
- Le lissage de vitesse rend vos animations plus naturelles.
- Choisissez des animations de lissage de vitesse pour les éléments d'interface utilisateur.
- Éviter les animations de lissage à l'approche ou à l'éloignement, sauf si vous pouvez être courtes. ils ont tendance à se sentir lents vis-à-vis des utilisateurs finaux.
Dans une animation classique, le terme utilisé pour désigner un mouvement qui démarre lentement et accélère est "lent". et pour un mouvement qui démarre rapidement et ralentit, c'est "lent". Les termes les plus couramment utilisés sur le Web sont respectivement "à l'entrée" et "à la sortie". Parfois, les deux sont combinés, ce que l'on appelle la "facilité d'entrée". Le lissage de vitesse correspond en fait à rendre l'animation moins sévère ou prononcée.
Mots clés de lissage de vitesse
Les animations et les transitions CSS vous permettent de 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 le lissage de vitesse afin d'exprimer la personnalité de votre application avec beaucoup plus de liberté.
Voici quelques mots clés que vous pouvez utiliser dans CSS:
linearease-inease-outease-in-out
Source: CSS Transitions, W3C
Vous pouvez également utiliser le mot clé steps, qui vous permet de créer des transitions comportant des étapes distinctes, mais 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 dites linéaires. Le graphique d'une transition linéaire se présente comme suit:
Au fur et à mesure que le temps passe, la valeur augmente de façon égale. Avec le mouvement linéaire, les choses ont tendance à donner l'impression que les choses semblent robotiques et pas naturelles, ce qui est quelque chose que les utilisateurs trouvent bouleversant. De manière 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 se présente comme suit:
transition: transform 500ms linear;
Animations de lissage à l'éloignement
Le lissage de vitesse entraîne le démarrage de l'animation plus rapide que celui des animations linéaires. Il présente également un ralentissement à la fin.
Le lissage de vitesse est généralement idéal pour le travail de l'interface utilisateur, car le démarrage rapide donne à vos animations une sensation de réactivité, tout en permettant un ralentissement naturel à la fin.
Afficher une animation de lissage de vitesse
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 de lissage de vitesse démarrent lentement et se terminent rapidement, ce qui est le contraire des animations de lissage à l'approche.
Ce genre d'animation s'apparente à une chute de pierre, qui commence lentement et tombe rapidement sur le sol avec un coup amorti.
Toutefois, du point de vue de l'interaction, les lissages de sommeil peuvent sembler un peu inhabituels en raison de leur fin soudaine. les choses qui bougent dans le monde réel ont tendance à ralentir au lieu de simplement s’arrêter soudainement. Les lissages de vitesse au démarrage ont également un effet négatif sur la perception de la réactivité de votre site ou de votre application, car ils sont lents au démarrage.
Afficher une animation lissage à l'approche
Pour utiliser une animation de lissage à l'approche, comme les animations de lissage et de lissage linéaire, vous pouvez utiliser son mot clé:
transition: transform 500ms ease-in;
Animations de lissage à l'approche/l'éloignement
Ce mode revient à une voiture qui accélère et ralentit. Utilisé à bon escient, il peut produire un effet plus spectaculaire qu'un simple relâchement.
N'utilisez pas de durée d'animation trop longue, en raison de la lenteur du lissage de vitesse au début de l'animation. Un nombre compris entre 300 et 500 ms convient généralement, mais le nombre exact dépend fortement de l'aspect de votre projet. Cela dit, en raison du démarrage lent, du milieu rapide et de la fin lente, le contraste de l'animation augmente, ce qui peut être très satisfaisant pour les utilisateurs.
Afficher une animation lissage à l'approche/l'éloignement
Pour obtenir une animation de lissage à l'approche/l'éloignement, vous pouvez utiliser le mot clé CSS ease-in-out:
transition: transform 500ms ease-in-out;