Ces effets de transition peuvent \u00eatre appliqu\u00e9s soit en JavaScript<\/strong> ou directement en CSS<\/strong>. Il existe des librairies open source et d’autres payantes pour r\u00e9aliser des animations web avec les easing functions qui s’appuient sur les courbes de B\u00e9zier. En CSS, on va g\u00e9n\u00e9ralement appliquer l’animation sur une classe que l’on va ajouter \u00e0 un \u00e9l\u00e9ment 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 \u00e9l\u00e9ment ce qui revient \u00e0 faire du CSS de fa\u00e7on plus dynamique. Des animations bien r\u00e9alis\u00e9es et bien pens\u00e9es dans une page web apportent une forte plus-value et un c\u00f4t\u00e9 dynamique.<\/p>\n\n\n\n Que ce soit en CSS ou en JavaScript, les transitions peuvent s’appliquer sur n’importe quel \u00e9l\u00e9ment de la page HTML. Il faut d\u00e9finir le mouvement, la dur\u00e9e et le type d’acc\u00e9l\u00e9ration que l’on souhaite utiliser. Les exemples suivants vont permettre de bien comprendre la diff\u00e9rence entre les mots cl\u00e9s ease, ease-in, etc. Elles s’appliquent soit sur la propri\u00e9t\u00e9 transition <\/strong>ou la propri\u00e9t\u00e9 animation<\/strong> et en fonction des mots cl\u00e9s, les valeurs interm\u00e9diaires du mouvement seront diff\u00e9rentes. Toutes les animations des exemples ci-dessous sont d\u00e9finies avec le m\u00eame d\u00e9lai, mais avec une acc\u00e9l\u00e9ration diff\u00e9rente comme on peut le voir dans le code source.<\/p>\n\n\n\n Comme son nom l’indique, cette fonction affiche une animation lin\u00e9aire donc sans acc\u00e9l\u00e9ration. Le mouvement est constant<\/strong> entre le d\u00e9but et la fin de l’animation. Ce n’est pas un mot cl\u00e9 \u00e0 utiliser pour faire appara\u00eetre ou dispara\u00eetre un \u00e9l\u00e9ment. Il peut \u00eatre utilis\u00e9 pour changer la couleur d’un bloc ou d’un background sur une animation plut\u00f4t lente d’un objet de la page.<\/p>\n\n\n\n La valeur ease est celle utilis\u00e9e par d\u00e9faut <\/strong>par les propri\u00e9t\u00e9s CSS si elles ne sont pas d\u00e9finies. Elle permet un mouvement qui va acc\u00e9l\u00e9rer au milieu puis la ralentir sur la fin. Elle ressemble \u00e0 la fonction ease-in-out mais d’une fa\u00e7on plus prononc\u00e9e. Elle peut \u00eatre bien \u00e0 utiliser dans un slider pour la transition entre les \u00e9l\u00e9ments au moment ou l’utilisateur change de slide.<\/p>\n\n\n\n Cette fonction permet une acc\u00e9l\u00e9ration progressive<\/strong> tout au long du mouvement. L’objet va aller de plus en plus vite jusqu’\u00e0 la fin de l’animation ce qui peut avoir un effet un peu brusque. C’est une valeur qui peut \u00eatre utilis\u00e9e pour faire disparaitre un \u00e9l\u00e9ment en jouant sur l’opacit\u00e9 au moment o\u00f9 l’on souhaite fermer un menu ou une fen\u00eatre modale dans la page.<\/p>\n\n\n\n \u00c0 l’inverse de la fonction ease-in, la valeur ease-out va d\u00e9c\u00e9l\u00e9rer le mouvement<\/strong> tout au long du d\u00e9lai. L’objet commence son mouvement normalement puis il ralentit jusqu’\u00e0 arriver \u00e0 son emplacement d’une fa\u00e7on lente. C’est une valeur id\u00e9ale pour faire apparaitre un \u00e9l\u00e9ment dans la page car il va venir se poser \u00e0 l’endroit ou il doit arriver d’une fa\u00e7on tr\u00e8s souple.<\/p>\n\n\n\n Enfin la derni\u00e8re valeur ease-in-out<\/strong> va reprendre le principe de la fonction ease-in coupl\u00e9 \u00e0 du ease-out. Elle va acc\u00e9l\u00e9rer au d\u00e9but et ralentir \u00e0 la fin. Elle ressemble un peu \u00e0 la valeur ease mais d’une fa\u00e7on moins prononc\u00e9e d\u00fbt \u00e0 l’effet d’acc\u00e9l\u00e9ration et de d\u00e9c\u00e9l\u00e9ration. C’est un mot cl\u00e9 passe-partout qui peut \u00eatre utilis\u00e9 sur tout type d’animation.<\/p>\n\n\n\n Il est aussi possible de d\u00e9finir 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\u00e9d\u00e9finies. Par exemple la valeur ease correspond \u00e0 cubic-bezier(0.25, 0.1, 0.25, 1.0). Le site easings.net<\/a> liste toutes les fonctions easing que l’on peut reproduire avec cubic-bezier. L’animation ci-dessous se base sur la valeur easeInOutCubic<\/strong> qui reprend la valeur ease-in-out de fa\u00e7on plus lente au d\u00e9but et plus rapide \u00e0 la fin du mouvement.<\/p>\n\n\n\n De nombreuses librairies open source permettent de r\u00e9aliser des animations interactives<\/strong> dans une page. La plus connue est jQuery<\/strong> qui facilite grandement les animations en JavaScript. En vanilla JS il existe Anime.js<\/strong> qui est une librairie tr\u00e8s pouss\u00e9e et qui propose m\u00eame du line drawing ou du morphing de SVG. Enfin la librairie GreenSock<\/strong>, tr\u00e8s connue par les d\u00e9veloppeurs venant de Flash, propose de nombreuses fonctionnalit\u00e9s, mais elle est payante si on souhaite l’int\u00e9grer sur une plateforme accessible par abonnement. <\/p>\n\n\n\n Les animations CSS dans une page HTML apportent un rendu moderne et dynamique. Le fait de bien comprendre les easing functions<\/strong> va faciliter l’utilisation de sp\u00e9cifications comme le material design de Google afin de mieux r\u00e9aliser les animations et les transitions. Les effets de transitions entre \u00e9l\u00e9ments du material design<\/a> sont bas\u00e9es sur l’acc\u00e9l\u00e9ration et la d\u00e9c\u00e9l\u00e9ration du mouvement ce qui fait tout son charme. En r\u00e9glant la bonne temporisation entre dur\u00e9e, vitesse et courbe d’acc\u00e9l\u00e9ration, on obtient un d\u00e9placement agr\u00e9able et moderne. Les syst\u00e8mes d’exploitation comme Android sont beaucoup bas\u00e9s sur les animations que ce soit pour les transitions entre les interfaces que les feedbacks utilis\u00e9s au moment d’une interaction.<\/p>\n\n\n\n Que ce soit dans le domaine du web, des applications ou des syst\u00e8mes d’exploitation, l’animation est au c\u0153ur du design de ces syst\u00e8mes. Elle apporte de la modernit\u00e9<\/strong> et du dynamisme<\/strong> dans l’interaction et l’exp\u00e9rience utilisateur. En utilisant bien les fonctions d’acc\u00e9l\u00e9ration sur des animations, on peut r\u00e9aliser des interfaces \u00e0 fortes valeurs ajout\u00e9es. \u00c7a apporte du style pour un code qui n\u2019est au final pas plus compliqu\u00e9, car les mots cl\u00e9s ease, ease-in, etc. simplifient le d\u00e9veloppement. Elles doivent \u00eatre pens\u00e9es de fa\u00e7on efficace sans g\u00eaner l’utilisateur dans la navigation du site web.<\/p>\n\n\n\n![\"\"](\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2023\/02\/illustration_easing-function.png\")
Les principales fonctions d’acc\u00e9l\u00e9ration<\/h2>\n\n\n\n
\/* Classe d'animation *\/\n.slide-linear{animation:slide-anim 2s linear infinite;}\n.slide-ease{animation:slide-anim 2s ease infinite;}\n.slide-easein{animation:slide-anim 2s ease-in infinite;}\n.slide-easeout{animation:slide-anim 2s ease-out infinite;}\n.slide-easeinout{animation:slide-anim 2s ease-in-out infinite;}\n.slide-easeinoutcubic{animation:slide-anim 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;}\n\n\/* Fonction d'animation *\/\n@keyframes slide-anim {\n 0% {left:0%;}\n 100% {left:100%;}\n}<\/code><\/pre>\n\n\n\nLe mot cl\u00e9 linear<\/h3>\n\n\n\n
Le mot cl\u00e9 ease<\/h3>\n\n\n\n
Le mot cl\u00e9 ease-in<\/h3>\n\n\n\n
Le mot cl\u00e9 ease-out<\/h3>\n\n\n\n
Le mot cl\u00e9 ease-in-out<\/h3>\n\n\n\n
La fonction cubic-bezier<\/h3>\n\n\n\n
Les librairies d’animations<\/h2>\n\n\n\n
Des librairies open source<\/h3>\n\n\n\n
Les transitions en material design<\/h3>\n\n\n\n
Conclusion<\/h2>\n\n\n\n