Les fonctions d’accélération ou easing functions
Dans le domaine de l’animation en général, une courbe d’accélération représente une fonction mathématique qui va définir la variation de la vitesse d’un mouvement sur un temps donné. Il existe une certaine nomenclature des principales fonctions d’accélération, mais elles peuvent aussi être personnalisées en fonction des besoins. À l’inverse d’une fonction linéaire dont la vitesse est constante tout le long du mouvement, une fonction easing va accélérer ou décélérer soit au début ou à la fin de l’animation. Cela permet de réaliser des effets bien plus sympas visuellement pour les animations web intégrées au sein de la page HTML.
Ces effets de transition peuvent être appliqués soit en JavaScript ou directement en CSS. Il existe des librairies open source et d’autres payantes pour réaliser des animations web avec les easing functions qui s’appuient sur les courbes de Bézier. En CSS, on va généralement appliquer l’animation sur une classe que l’on va ajouter à un élément en fonction de l’interaction de l’utilisateur. On peut par exemple afficher un modal ou une sidebar au clic sur un bouton. En JavaScript les animations vont se faire directement sur l’attribut style d’un élément ce qui revient à faire du CSS de façon plus dynamique. Des animations bien réalisées et bien pensées dans une page web apportent une forte plus-value et un côté dynamique.
Les principales fonctions d’accélération
Que ce soit en CSS ou en JavaScript, les transitions peuvent s’appliquer sur n’importe quel élément de la page HTML. Il faut définir le mouvement, la durée et le type d’accélération que l’on souhaite utiliser. Les exemples suivants vont permettre de bien comprendre la différence entre les mots clés ease, ease-in, etc. Elles s’appliquent soit sur la propriété transition ou la propriété animation et en fonction des mots clés, les valeurs intermédiaires du mouvement seront différentes. Toutes les animations des exemples ci-dessous sont définies avec le même délai, mais avec une accélération différente comme on peut le voir dans le code source.
/* Classe d'animation */
.slide-linear{animation:slide-anim 2s linear infinite;}
.slide-ease{animation:slide-anim 2s ease infinite;}
.slide-easein{animation:slide-anim 2s ease-in infinite;}
.slide-easeout{animation:slide-anim 2s ease-out infinite;}
.slide-easeinout{animation:slide-anim 2s ease-in-out infinite;}
.slide-easeinoutcubic{animation:slide-anim 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;}
/* Fonction d'animation */
@keyframes slide-anim {
0% {left:0%;}
100% {left:100%;}
}Le mot clé linear
Comme son nom l’indique, cette fonction affiche une animation linéaire donc sans accélération. Le mouvement est constant entre le début et la fin de l’animation. Ce n’est pas un mot clé à utiliser pour faire apparaître ou disparaître un élément. Il peut être utilisé pour changer la couleur d’un bloc ou d’un background sur une animation plutôt lente d’un objet de la page.
Le mot clé ease
La valeur ease est celle utilisée par défaut par les propriétés CSS si elles ne sont pas définies. Elle permet un mouvement qui va accélérer au milieu puis la ralentir sur la fin. Elle ressemble à la fonction ease-in-out mais d’une façon plus prononcée. Elle peut être bien à utiliser dans un slider pour la transition entre les éléments au moment ou l’utilisateur change de slide.
Le mot clé ease-in
Cette fonction permet une accélération progressive tout au long du mouvement. L’objet va aller de plus en plus vite jusqu’à la fin de l’animation ce qui peut avoir un effet un peu brusque. C’est une valeur qui peut être utilisée pour faire disparaitre un élément en jouant sur l’opacité au moment où l’on souhaite fermer un menu ou une fenêtre modale dans la page.
Le mot clé ease-out
À l’inverse de la fonction ease-in, la valeur ease-out va décélérer le mouvement tout au long du délai. L’objet commence son mouvement normalement puis il ralentit jusqu’à arriver à son emplacement d’une façon lente. C’est une valeur idéale pour faire apparaitre un élément dans la page car il va venir se poser à l’endroit ou il doit arriver d’une façon très souple.
Le mot clé ease-in-out
Enfin la dernière valeur ease-in-out va reprendre le principe de la fonction ease-in couplé à du ease-out. Elle va accélérer au début et ralentir à la fin. Elle ressemble un peu à la valeur ease mais d’une façon moins prononcée dût à l’effet d’accélération et de décélération. C’est un mot clé passe-partout qui peut être utilisé sur tout type d’animation.
La fonction cubic-bezier
Il est aussi possible de définir sa propre fonction d’animation avec cubic-bezier(X1, Y1, X2, Y2). Toutes les fonctions vues ci-dessus utilisent en fait cubic-bezier avec des valeurs prédéfinies. Par exemple la valeur ease correspond à cubic-bezier(0.25, 0.1, 0.25, 1.0). Le site easings.net liste toutes les fonctions easing que l’on peut reproduire avec cubic-bezier. L’animation ci-dessous se base sur la valeur easeInOutCubic qui reprend la valeur ease-in-out de façon plus lente au début et plus rapide à la fin du mouvement.
Les librairies d’animations
Des librairies open source
De nombreuses librairies open source permettent de réaliser des animations interactives dans une page. La plus connue est jQuery qui facilite grandement les animations en JavaScript. En vanilla JS il existe Anime.js qui est une librairie très poussée et qui propose même du line drawing ou du morphing de SVG. Enfin la librairie GreenSock, très connue par les développeurs venant de Flash, propose de nombreuses fonctionnalités, mais elle est payante si on souhaite l’intégrer sur une plateforme accessible par abonnement.
Les transitions en material design
Les animations CSS dans une page HTML apportent un rendu moderne et dynamique. Le fait de bien comprendre les easing functions va faciliter l’utilisation de spécifications comme le material design de Google afin de mieux réaliser les animations et les transitions. Les effets de transitions entre éléments du material design sont basées sur l’accélération et la décélération du mouvement ce qui fait tout son charme. En réglant la bonne temporisation entre durée, vitesse et courbe d’accélération, on obtient un déplacement agréable et moderne. Les systèmes d’exploitation comme Android sont beaucoup basés sur les animations que ce soit pour les transitions entre les interfaces que les feedbacks utilisés au moment d’une interaction.
Conclusion
Que ce soit dans le domaine du web, des applications ou des systèmes d’exploitation, l’animation est au cœur du design de ces systèmes. Elle apporte de la modernité et du dynamisme dans l’interaction et l’expérience utilisateur. En utilisant bien les fonctions d’accélération sur des animations, on peut réaliser des interfaces à fortes valeurs ajoutées. Ça apporte du style pour un code qui n’est au final pas plus compliqué, car les mots clés ease, ease-in, etc. simplifient le développement. Elles doivent être pensées de façon efficace sans gêner l’utilisateur dans la navigation du site web.