Comprendre les fonctions d'accélération pour les animations et les transitions CSS

À propos de l'auteur

Adrian Bece est un développeur web fullstack polyvalent avec une vaste expérience du commerce électronique qui travaille actuellement chez PROTOTYP en tant que responsable technique. Il apprécie …
En savoir plus sur
Adrian
↬

Avez-vous déjà remarqué à quel point les animations sont fluides et agréables sur une image bien faite, projet professionnel? Je me souviens du site Web In Pieces où les animations sont utilisées non seulement pour la décoration, mais elles transmettent également le message sur les espèces en voie de disparition de manière percutante. Non seulement la conception et le style de l'animation sont beaux, mais ils coulent également bien et harmonieusement. C'est précisément ce flux en combinaison avec la conception et la présentation qui donne à l'animation un aspect magnifique et naturel. C'est la puissance des fonctions d'assouplissement, également appelées fonctions de synchronisation.

Lors de l'écriture des propriétés de transition et d'animation en CSS, nous optons généralement pour les fonctions d'assouplissement prédéfinies comme easy-out parce que c'est simple , ils ont l'air bien et fonctionnent bien dans la plupart des cas. Cependant, avoir une douzaine d'éléments ou plus sur une page avec une animation qui présente la même durée et les mêmes valeurs de fonction d'accélération peut rendre l'interface utilisateur un peu fade et monotone. Les humains réagissent mieux au mouvement naturel, donc rendre l'animation et la transition plus variées et naturelles se traduira par une meilleure expérience utilisateur.

Si nous revenons à l'exemple In Pieces et inspectons la feuille de style nous pouvons remarquer que diverses fonctions d'assouplissement personnalisées cubic-bezier sont utilisées en combinaison avec les fonctions de synchronisation prédéfinies linear et easy-in pour réaliser ce beau flux d'animation. Les animations n'auraient pas l'air aussi bonnes si seules des fonctions d'accélération prédéfinies étaient utilisées au lieu de fonctions d'accélération personnalisées. La vidéo suivante présente le site Web In Pieces avec toutes les fonctions d'accélération réglées sur facilité de sortie . Même s'il n'y a rien de mal avec les animations, remarquez à quel point elles ne sont pas aussi étonnantes ni excitantes que les animations originales.

Dans cet article, nous allons plonger dans les fonctions d'assouplissement CSS, les types de fonctions d'accélération, et comment créer des fonctions d'accélération personnalisées à l'aide de courbes de Bézier cubiques.

Under The Hood

Afin de mieux comprendre les fonctions d'accélération, nous devons prendre du recul et jeter un œil aux bases de l'animation en CSS.

L'animation est définie par les images clés qui déterminent l'apparence et le positionnement d'un élément en certains points. Les transitions CSS utilisent deux images clés (valeur de début et de fin), tandis que les animations CSS permettent un contrôle plus précis avec la règle @keyframes .

La durée de l'animation détermine la durée pendant laquelle l'animation passe de la première image clé à la dernière. Le graphique suivant montre la connexion entre les images clés de l'animation et la durée.

L'animation peut progresser de plusieurs manières entre deux images clés. Par exemple, l'animation peut avoir une vitesse constante ou elle peut se déplacer rapidement au début et ralentir vers la fin, ou se déplacer lentement au début puis s'accélérer jusqu'à ce qu'elle atteigne la fin, etc. est défini avec les fonctions d'assouplissement (fonctions de temporisation) . Si l'on regarde le graphique précédent, la fonction d'accélération est représentée par la forme de la ligne reliant les deux points. Nous avons utilisé la fonction linéaire (ligne droite) pour l'exemple précédent, mais nous pouvons également utiliser une courbe pour relier les images clés.

Comme vous pouvez le voir, il existe de nombreuses options et variations possibles pour les fonctions d'accélération d'animation et nous les examinerons ensuite.

Types de fonctions d'accélération [19659003] Il existe trois principaux types de fonctions d'accélération qui peuvent être utilisées dans CSS:

• Fonctions linéaires ( linear ),
• Fonctions de Bézier cubique (inclut facilité easy-in easy-out et easy-in-out ),
• Fonctions d'escalier ( marches ).

Fonctions linéaires

Nous avons couvert les fonctions linéaires dans l'un des exemples précédents, alors faisons un bref récapitulatif. Avec la fonction de synchronisation linéaire, l'animation parcourt les images clés à une vitesse constante. Comme vous le savez peut-être déjà, la fonction de synchronisation linéaire peut être facilement définie dans CSS en utilisant le mot-clé linear .

Fonctions de Bézier cubique

Bien que les fonctions de synchronisation linéaire aient leurs cas d'utilisation, elles peuvent donner aux animations un aspect fade et artificiel si elles sont mal utilisées ou utilisé trop souvent. Comme nous l'avons vu dans l'exemple In Pieces les utilisateurs de réagissent mieux au mouvement naturel c'est-à-dire aux fonctions de synchronisation non linéaires qui peuvent accélérer et décélérer.

Courbes de Bézier sont couramment utilisés dans les graphiques vectoriels, les animations et la robotique pour créer facilement des courbes et des trajectoires fluides. En CSS, nous utilisons des courbes de Bézier définies par quatre points, appelées courbes Cubic Bézier .

Fonctions d'assouplissement prédéfinies couramment utilisées comme facilité facilité -in easy-out et easy-in-out appartiennent aux fonctions Cubic Bézier. Ils peuvent être utilisés comme un moyen rapide de définir une fonction d'accélération non linéaire. Même une fonction linéaire peut être définie en utilisant une fonction cubic-bezier .

Même si les valeurs prédéfinies fonctionnent bien dans de nombreux cas, savoir créer des custom Cubic Bézier fonctions g Vous avez encore plus de contrôle sur l'aspect et la convivialité de l'animation, ce qui peut rendre l'animation encore plus impressionnante et percutante.

Dans l'exemple suivant, j'ai édité les animations de l'exemple In Pieces pour utiliser un autre Fonction de Bézier cubique avec différentes valeurs. Vous pouvez voir à quel point l'animation est différente et ressentie avec cette fonction d'accélération.

 cubic-bezier (0, 1.2, 1, 0.2) 

Jetons un coup d'œil à la fonction cubic-bezier qui est utilisé pour définir les courbes de Bézier cubiques en CSS. La fonction cubique de Bézier est définie par quatre points (paires de coordonnées x et y), mais nous ne définissons que 2 points dans la fonction cubic-bezier . Pourquoi?

En effet, le premier (P0) et le dernier point (P3) sont fixés au début (état d'animation initial ) et la fin (état d'animation final) de la courbe, car l'animation doit se terminer sur une image clé spécifiée et dans la durée spécifiée. Avec les deux points restants (P1 et P2), nous pouvons affiner la courbe et l'assouplissement de la fonction, résultant avec une vitesse d'animation non linéaire.

 cubic-bezier (x1, y1, x2, y2) 

Les coordonnées X ( x1 et x2 ) représentent le rapport temporel et sont limitées aux valeurs comprises entre 0 et 1 (l'animation ne peut pas commencer plus tôt ou durer plus longtemps que spécifié), tandis que les coordonnées Y () ] y1 et y2 ) représentent la sortie de l'animation et leurs valeurs, qui sont généralement définies entre 0 et 1 mais ne sont pas limitées à cette plage. Nous pouvons utiliser les valeurs y1 et y2 qui sont en dehors de la plage 0 et 1 pour créer des effets de rebond.

Si l'animation est constituée de plusieurs images clés, définies dans la propriété CSS @keyframes la fonction d'accélération sera appliquée à chaque courbe entre les deux points. Si nous appliquons la fonction d'accélération à une animation avec 3 images clés, l'animation s'accélérera au début de la première image clé et ralentira près de la deuxième image clé et le même mouvement sera répété pour la paire suivante. d'images clés (deuxième image clé et dernière image clé).

Remarquez comment la fonction d'accélération est répétée entre chaque paire d'images clés - première et deuxième images clés (première paire) et deuxième image clé et dernière image clé (deuxième paire). La durée de l'animation est la même pour les exemples précédents et suivants.

La ​​création de ces fonctions peut être une tâche complexe, vous n'aurez donc probablement pas à ajuster les coordonnées en devinant les paramètres cubic-bezier . Vous devrez utiliser un outil pour vous aider à déterminer ces nombres magiques afin de créer une fonction de synchronisation parfaitement adaptée à votre animation. Heureusement, il existe de nombreux navigateurs et outils en ligne pour nous aider. Nous en parlerons dans l'une des sections suivantes de cet article.

Fonctions d'escalier

Les fonctions d'escalier permettent à l'animation de passer d'un nombre spécifique d'images de manière non continue. Vous pouvez la considérer comme une animation «à cocher».

Par exemple, si nous jetons un coup d'œil à l'un des exemples précédents où une boîte passe de 0px à 500px et nous limitons les animations à 5 étapes, l'animation sautera entre les 5 images clés suivantes - positions 0px, 100px, 200px, 300px et 400px.

Nous pouvons facilement y parvenir avec la fonction steps en CSS.

 steps (number_of_frames) 

 steps (5 ) 

Cette fonction a une option supplémentaire pour contrôler quelles images clés sont incluses. Comme vous l'avez vu dans l'exemple précédent, l'animation d'une boîte passant de 0px à 500px avec 5 étapes se terminera par une position de 400px. Si nous voulons que l'animation commence à 100px et se termine à 500px, nous pouvons utiliser l'option jump term comme second argument. Le terme de saut affecte la façon dont les images clés seront sélectionnées dans la chronologie de l'animation.

 steps (number_of_frames, jump_term) 

 steps (5, jump-start) 

Les options de termes de saut suivantes peuvent être utilisées dans les étapes CSS fonction:

• jump-start
  L'animation saute à droite du point de départ et le point de départ n'est pas visible t. D'après notre exemple, les images clés seront de 100 pixels, 200 pixels, 300 pixels, 400 pixels, 500 pixels.
• jump-end
  Le dernier saut se produit lorsque l'animation se termine et n'est pas visible. À partir de notre exemple, les images clés seront 0px, 100px, 200px, 300px, 400px.
• jump-both
  Le premier et le dernier saut se produiront au début et à la fin de l'animation, donc ils ne le feront pas Être visible. Les 5 sauts se produiront entre les points de départ et d'arrivée. D'après notre exemple, ces images clés seront 80px, 165px, 250px, 335px, 420px.
• jump-none
  Le premier et le dernier saut seront visibles. D'après notre exemple, ces images clés seront 0px, 125px, 250px, 375px, 500px.

L'exemple suivant montre comment divers termes de saut affectent le comportement de l'animation. Différents termes de saut sont appliqués à l'animation en 5 étapes avec la même durée.

Debugging Animations And Useful Tools

Comme nous l'avons vu dans l'exemple de Cubic Bézier, nous avons besoin d'une sorte de l'outil qui nous aidera à affiner les paramètres de la courbe de Bézier cubique afin que nous puissions obtenir l'aspect et la convivialité de l'animation que nous voulons.

Dans cette section, nous allons jeter un œil aux outils de navigation, aux sites Web et Des styles CSS qui devraient nous aider à faire exactement cela.

Outils de navigation

Les outils de développement de navigateur fournissent des fonctionnalités d'édition de fonctions facilitantes prêtes à l'emploi. Veuillez noter que seules les fonctions de Cubic Bézier sont disponibles pour l'édition. Ces outils offrent un aperçu rapide et simple de l'animation afin que le développeur puisse obtenir des commentaires instantanés et affiner la fonction d'accélération.

Chrome Safari et Firefox proposent également un onglet Animations dédié dans les outils de développement qui offre une vue plus détaillée aperçu, y compris les propriétés de l'animation, la durée, la chronologie, les images clés, le délai, etc.

Outils et sites Web utiles

Il existe de nombreuses ressources en ligne utiles et des préréglages d'assouplissement qui peuvent donner beaucoup plus de variété aux fonctions d'assouplissement. ] Aide-mémoire sur les fonctions d'assouplissement d'Andrey Sitnik et Ivan Solovev et Outil d'animation d'assouplissement CSS de Matthew Lein. Ces outils offrent un large éventail de préréglages que vous pouvez utiliser comme base pour votre fonction d'accélération, puis affiner la courbe pour l'adapter à la chronologie de votre animation.

Animations et accessibilité

Lorsque vous travaillez avec des fonctions d’assouplissement et des animations en général, il est important de répondre aux exigences d’accessibilité. Certaines personnes préfèrent naviguer sur le Web avec un mouvement réduit, nous devrions donc fournir une solution de secours appropriée. Cela peut être facilement réalisé avec une requête multimédia de préférence à mouvement réduit largement prise en charge. Cette requête multimédia nous permet soit de supprimer l'animation, soit d'attribuer une animation différente en fonction des préférences de l'utilisateur.

 .animated-element {
  animation: / * Animation régulière * /;
}

@media (préfère le mouvement réduit) {
  .animated-element {
    / * Animation accessible avec mouvement réduit * /
  }
} 

J'ai modifié un exemple d'horloge analogique par Alvaro Montoro pour inclure une animation alternative pour les utilisateurs avec le drapeau prefers-reduction-motion .

Sur une animation par défaut, l'aiguille des secondes de l'horloge bouge constamment, ce qui peut causer des difficultés à certains utilisateurs. Nous pouvons facilement rendre l'animation beaucoup plus accessible en changeant la fonction de synchronisation de l'animation en étapes . Dans l'exemple suivant, les utilisateurs avec le drapeau prefers-reduction-motion afficheront une animation où le bras des secondes tiquera toutes les cinq secondes.

 @media (prefers-reduction-motion) {
  .arm.second {
    fonction de synchronisation d'animation: étapes (12);
  }
} 

Conclusion

Les fonctions d’assouplissement, ou fonctions de synchronisation, modifient l’aspect et la convivialité de l’animation en affectant la vitesse (vitesse) de l’animation. Les fonctions d'assouplissement nous permettent de créer des animations qui ressemblent à un mouvement naturel, ce qui peut se traduire par une UX améliorée et plus agréable et avoir une meilleure impression sur les utilisateurs. Nous avons vu comment nous pouvons utiliser des valeurs prédéfinies comme linear easy-out eas etc. pour ajouter rapidement une fonction de chronométrage et comment créez des fonctions d'accélération personnalisées avec la fonction cubic-bezier pour des animations plus impressionnantes et percutantes. Nous avons également couvert les fonctions d'escalier qui peuvent être utilisées pour créer une animation de «ticking» et qui sont rarement utilisées. Lors de la création d'animations, il est important de garder à l'esprit l'accessibilité et de proposer une alternative, des animations moins distrayantes avec moins de mouvement aux utilisateurs avec le jeu d'indicateurs prefers-reduction-motion .

Il existe de nombreux navigateurs et outils en ligne qui peuvent simplifier et rationaliser la création de fonctions d'accélération personnalisées, de sorte que la création d'animations avec un beau flux est plus facile que jamais. Si vous ne l'avez pas déjà fait, je vous recommande d'expérimenter diverses fonctions d'accélération et de créer votre propre bibliothèque de fonctions d'accélération.

Références

• MDN Web Docs
• « Work With Animations "MDN Web Docs
• " Web Animations In Safari 13.1 "Antoine Quint, WebKit
• " The Basics Of Easing "Paul Lewis, Web Fundamentals, Google Developers [19659024] « Inspect Animations ,» Kayce Basques, Chrome DevTools, Chrome Developers

( vf, yk, il)