Choisissez le lissage de vitesse approprié pour votre projet, qu'il s'agisse d'un lissage de vitesse à l'ouverture, à la sortie ou les deux. Vous pouvez même utiliser les rebonds pour vous amuser encore plus !
Après avoir discuté des différentes options disponibles pour le lissage de vitesse dans les animations, quel type devriez-vous utiliser dans vos projets et quel type de durée vos animations devraient-elles avoir ?
Résumé
- Utiliser des animations de lissage pour les éléments d'interface utilisateur un lissage quintique est une aisance très agréable, quoique rapide.
- Assurez-vous d'utiliser la durée de l'animation. Les lissages de sortie et les lissages de vitesse doivent durer entre 200 ms et 500 ms, tandis que les rebonds et les lissages élastiques doivent durer entre 800 ms et 1 200 ms.
De manière générale, un adoucissement constitue le bon choix, et certainement une bonne option par défaut. Il est rapide à démarrer, ce qui donne à vos animations un sentiment de réactivité, ce qui est souhaitable, mais avec un bon ralentissement à la fin.
Il existe un groupe d'équations de lissage de vitesse bien connues au-delà de celle spécifiée avec le mot clé ease-out en CSS, dont le degré d'agressivité est indiqué. Pour un effet d'assouplissement rapide, envisagez d'utiliser un lissage d'assouplissement quintique.
Afficher une animation de lissage de vitesse quintic
D’autres équations d’atténuation, en particulier les rebonds ou les lissages élastiques, doivent être utilisées avec parcimonie, et uniquement lorsqu’elles sont appropriées pour votre projet. Il y a peu de choses qui font sortir un utilisateur d'une expérience, comme une animation troublante. Si votre projet n'est pas destiné à être amusant, aucun élément ne doit rebondir autour de l'interface utilisateur. À l'inverse, si vous créez un site censé être léger, utilisez bien les rebonds !
Jouez facilement, découvrez ceux qui correspondent à la personnalité de votre projet et allez-y. Pour consulter la liste complète des types de lissage de vitesse, ainsi que des démonstrations, accédez à easings.net.
Choisir la durée d'animation appropriée
Il est important que toute animation ajoutée à votre projet ait la durée correcte. Trop courte et l'animation semblera agressive et nette trop longue et elle sera gênante et agaçante.
- Lissages de vitesse: environ 200 ms à 500 ms Cela permet à l'œil de voir l'animation, mais elle ne semble pas gênante.
- Lissage à l'approche: environ 200 ms à 500 ms Gardez à l'esprit qu'il tremblera à la fin et qu'aucun changement de code temporel n'atténuera cet impact.
- Effets de rebond ou d'élasticité: environ 800 ms à 1 200 ms Vous devez patienter le temps que l'effet élastique ou de rebond se stabilise. Sans ce délai supplémentaire, la partie élastique de l'animation sera agressive et désagréable à l'œil nu.
Bien sûr, il ne s'agit que de conseils. Testez vos propres facilités et choisissez ce qui convient à vos projets.