Choisissez le lissage de vitesse approprié pour votre projet, qu'il s'agisse d'un lissage de vitesse à l'entrée, à 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 l'accélération des animations, quel type d'accélération devez-vous utiliser dans vos projets et quel type de durée devez-vous utiliser ?
Résumé
- Utilisez des animations de lissage de vitesse pour les éléments de l'interface utilisateur. Un lissage à l'éloignement Quintic est un très bon, mais rapide et facile.
- Assurez-vous d'utiliser la durée de l'animation. Les lissages de vitesse et les lissage d'ouverture doivent être compris entre 200 et 500 ms, tandis que les rebonds et les lissages élastiques doivent durer plus longtemps entre 800 et 1 200 ms.
D'une manière générale, une facilité de sortie est l'appel approprié, qui constitue une bonne option par défaut. Le démarrage est rapide, 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 en plus de celle spécifiée avec le mot clé ease-out en CSS, dont l'"agressivité" est variable. Pour un effet de lissage rapide, envisagez un lissage à l'éloignement quintique.
Afficher une animation Quintic avec accélération pour la sortie
D'autres équations de lissage de vitesse, en particulier les rebonds ou les lissages élastiques, doivent être utilisées avec parcimonie et uniquement lorsque cela est approprié 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'a pas vocation à être amusant, assurez-vous qu'aucun élément ne tourne autour de l'interface utilisateur. À l'inverse, si vous créez un site censé être léger, utilisez des rebonds.
Amusez-vous avec facilité, déterminez celles qui correspondent à la personnalité de votre projet et passez à l’étape suivante. Pour obtenir la liste complète des types de lissage de vitesse ainsi que des démonstrations, consultez la page 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. L'animation est trop courte et nette, mais trop longue et gênante.
- Lissage à la sortie: environ 200 ms à 500 ms Cela permet à l'œil de voir l'animation, mais ne l'obstrue pas.
- Lissage à l'approche: de 200 à 500 ms. Gardez à l'esprit qu'il secouera à la fin et qu'aucun changement de calendrier n'atténuera cet impact.
- Effets de rebond ou d'élastique: environ 800 ms à 1 200 ms. Vous devez prévoir du temps pour que l'effet d'élastique ou de rebond soit « résolu ». Sans ce délai supplémentaire, la partie élastique rebondissante de l'animation sera agressive et désagréable à l'œil nu.
Bien sûr, il ne s'agit que de consignes. Testez vos propres paramètres et choisissez ce qui convient le mieux à vos projets.