Un guide visuel pour simplifier les fonctions dans Webflow

March 2, 2024

· 5 min

Dans cet article, nous examinerons rapidement l'historique des fonctions d'assouplissement et aborderons en profondeur le fonctionnement de chaque fonction.

Ce projet de fonctions d'assouplissement est sur notre compte depuis un certain temps. Nous l'avons utilisé comme guide visuel lorsque nous commencions à peine à utiliser Webflow. Lorsque je suis tombé dessus l'autre jour, il m'a semblé judicieux de l'étoffer un peu et de le partager sous forme de guide visuel des fonctions d'assouplissement par défaut de Webflow. Vous trouverez ci-dessous un guide visuel, ainsi qu'un lien vers un clonable plus complet, ainsi qu'une liste des fonctions d'assouplissement disponibles avec une description de leur fonctionnement. Mais commençons par un peu d'histoire des fonctions d'assouplissement.

Les racines mathématiques

Au cœur des fonctions d'assouplissement se trouve une base mathématique riche. Le concept d'accélération remonte à l'étude de la physique et du calcul, où les principes de l'accélération et de la décélération régissent le mouvement des objets dans le monde réel. Les mathématiciens et les physiciens ont développé des formules pour décrire ces mouvements naturels, jetant ainsi les bases de ce qui serait éventuellement appliqué à l'animation numérique. Les fonctions quadratique, cubique, quartique et quintique, entre autres, offrent une base mathématique pour simuler les subtilités du mouvement et de la vitesse, permettant ainsi aux animations de dépasser les limites de la progression linéaire.

L'évolution de l'animation

La transition des mathématiques à l'animation a commencé par des techniques traditionnelles dessinées à la main. Les premiers animateurs, comme ceux des pionniers de Disney, appliquaient intuitivement les principes de l'assouplissement pour donner vie à leurs créations, bien avant que le terme « assouplissement » ne soit officiellement inventé. Ils ont observé le mouvement du monde réel, capturant son essence image par image, pour créer des animations qui s'écoulent naturellement et transmettent des émotions et du caractère. Cette attention méticuleuse à la dynamique du mouvement a jeté les bases des fonctions d'assouplissement, bien que tout se fasse manuellement à l'époque.

La révolution numérique

Avec l'avènement de l'infographie et de l'animation numérique, les principes de l'assouplissement ont trouvé de nouveaux débouchés. L'ère numérique a permis de contrôler et de manipuler avec précision les courbes de mouvement, permettant aux animateurs et aux concepteurs de mettre en œuvre facilement des fonctions mathématiques complexes (jeu de mots). Les logiciels informatiques ont commencé à intégrer ces fonctions d'assouplissement, fournissant aux utilisateurs des options prédéfinies telles que « facilité d'entrée », « facilité de sortie » et « élastique » pour animer les objets de manière visuellement attrayante.

Fonctions de simplification dans la conception de l'interface utilisateur

L'application des fonctions d'assouplissement s'est étendue au-delà de l'animation traditionnelle, jouant un rôle crucial dans la conception de l'interface utilisateur (UI) et de l'expérience utilisateur (UX). Les interfaces numériques devenant de plus en plus interactives, les concepteurs ont reconnu l'importance de simplifier les fonctions pour rendre les transitions plus naturelles et intuitives. Qu'il s'agisse de l'extension fluide d'un menu, du rebond d'une notification ou de l'affichage en fondu d'une boîte de dialogue, toutes ces interactions ont bénéficié de fonctions simplifiées, améliorant l'expérience de l'utilisateur en imitant la fluidité du monde naturel.

Le canevas numérique d'aujourd'hui

Aujourd'hui, les fonctions d'assouplissement sont un outil indispensable dans la boîte à outils du concepteur numérique, parfaitement intégrées aux plateformes de conception Web telles que Webflow, aux bibliothèques d'animations et aux logiciels de conception d'interface utilisateur. Ils permettent aux concepteurs de créer des expériences numériques immersives et captivantes qui captent l'imagination de l'utilisateur et retiennent son attention. Des équations mathématiques du passé aux pages Web interactives d'aujourd'hui, les fonctions de simplification ont traversé le temps, évolué et s'adaptant, mais leur mission principale reste la même : donner vie au monde numérique, en le rendant aussi riche et dynamique que le monde extérieur à nos fenêtres.

Vous pouvez faire défiler l'interaction ci-dessus ou consulter projet complet et clonable ici.

Enfin, nous entrons dans le vif du sujet : à quoi sert chaque fonction d'assouplissement ?

LINÉAIRE (AUCUN)

Origine et signification : Aussi simple qu'une autoroute dans le désert. La linéarité implique un taux de variation uniforme : pas d'accélération, pas de décélération, juste un rythme soutenu du début à la fin.
Ce qu'il fait : Déplace ou efface les objets à une vitesse constante. Parfait pour ceux qui apprécient la simplicité et la prévisibilité de leurs animations.

FACILITÉ

Origine et signification : Pensez à vous détendre dans un bain chaud. Il démarre lentement, accélère, puis ralentit à nouveau, offrant une transition douce et réconfortante.
Ce qu'il fait : Ajoute une touche naturelle aux animations en commençant lentement, en accélérant au milieu, puis en ralentissant à la fin. C'est la référence par défaut pour une bonne raison !

FACILITÉ D'ENTRÉE

Origine et signification : Comme entrer dans le bain susmentionné sur la pointe des pieds, il s'agit de commencer doucement.
Ce qu'il fait : Lance l'animation lentement, puis accélère. Idéal pour attirer l'attention sur les éléments qui apparaissent à l'écran.

SE DÉTENDRE

Origine et signification : Le contraire de l'apaisement, c'est comme si vous vous détendiez enfin complètement dans le bain.
Ce qu'il fait : Commence plus brusquement et décélère jusqu'à un arrêt en douceur. Idéal pour les éléments quittant la scène.

ENTRÉE ET SORTIE FACILES

Origine et signification : Combine le meilleur des deux mondes : un début et une fin en douceur avec un peu de piquant au milieu.
Ce qu'il fait : Commence et se termine lentement, avec une accélération au milieu. La solution idéale pour les transitions qui doivent être dynamiques et fluides.

QUAD

Origine et signification : Quad vient du mot « quadratique », qui fait référence à un polynôme du second degré. C'est comme faire une promenade douce qui s'accélère progressivement.
Ce qu'il fait : Les animations dotées d'une fonction d'accélération QUAD démarrent lentement et s'accélèrent progressivement au fur et à mesure de leur progression, en suivant une courbe quadratique. Il est plus subtil que certains de ses homologues plus dramatiques, parfait pour les transitions douces et les mouvements simples.

CUBIQUE

Origine et signification : D'origine « cubique », cette fonction se rapporte à un polynôme du troisième degré. Imaginez une voiture qui accélère doucement à partir d'un panneau d'arrêt : elle démarre lentement mais prend de la vitesse plus nettement qu'un QUAD.
Ce qu'il fait : Les animations CUBIC commencent encore plus doucement que les animations QUAD, mais elles s'accélèrent plus rapidement, créant ainsi une courbe plus prononcée. Cela les rend parfaits pour attirer l'attention tout en maintenant une progression fluide.

QUART

Origine et signification : Quart vient de « quartique », un polynôme du quatrième degré. C'est comme si un sprinteur explosait hors des blocs, avec une accumulation progressive entraînant une accélération rapide.
Ce qu'il fait : Grâce à la fonction d'accélération QUART, les animations démarrent très lentement puis prennent rapidement de la vitesse, créant ainsi une courbe d'accélération abrupte. Il est idéal pour les mouvements dynamiques qui doivent mettre l'accent sur un changement ou une arrivée importants.

QUINTE

Origine et signification : Quint est dérivé de « quintique », qui fait référence à un polynôme du cinquième degré. Imaginez un lancement de fusée : une pause momentanée sur la rampe de lancement avant une puissante ascension.
Ce qu'il fait : Les animations QUINT démarrent le plus lentement de ce groupe, mais elles s'accélèrent ensuite de façon spectaculaire, offrant une courbe très nette. Cette fonction est idéale pour les entrées spectaculaires ou lorsque vous souhaitez créer un fort impact visuel.

SINE

Origine et signification : Le sinus est basé sur l'onde sinusoïdale mathématique, connue pour sa nature douce et oscillante. C'est comme le doux flux et reflux des vagues sur une plage.
Ce qu'il fait : L'assouplissement SINE permet une oscillation douce et harmonique de la vitesse de l'animation. Cela crée un mouvement naturel et organique, apaisant et agréable à l'œil, idéal pour les transitions subtiles.

EXPO

Origine et signification : Expo est l'abréviation de « exponentiel », ce qui indique une croissance de plus en plus rapide. Imaginez la courbe d'accélération d'une montagne russe alors qu'elle descend.
Ce qu'il fait : Les animations EXPO démarrent presque imperceptiblement, puis explosent en mouvement, fournissant une courbe d'accélération extrêmement abrupte. Cette fonction est idéale pour les transitions rapides et énergiques qui doivent attirer rapidement l'attention.

CIRC

Origine et signification : Circ est un terme « circulaire », qui incarne le mouvement d'entrée ou de sortie le long d'une trajectoire circulaire. Pensez à l'arc lisse d'une balle lancée en l'air.
Ce qu'il fait : Les animations d'accélération du CIRC se déplacent avec la fluidité et la précision d'un arc de cercle, commençant lentement et accélérant d'une manière à la fois naturelle et élégante. Il est parfait pour les éléments qui ont besoin de bouger ou de faire la transition avec grâce et fluidité.

RETOUR

Origine et signification : Le retour implique un mouvement qui dépasse le point de départ ou d'arrivée pour revenir ensuite, comme tirer une fronde vers l'arrière avant de la relâcher.
Ce qu'il fait : Le BACK easing permet aux animations de dépasser leur cible avant de se mettre en place, créant ainsi un effet de rebond ludique. Il ajoute une touche d'élasticité et de vivacité aux transitions, les rendant plus dynamiques et plus engageantes.

ÉLASTIQUE

Origine et signification : Comme son nom l'indique, Elastic incarne le comportement d'une bande élastique qui s'étire et se referme. C'est la reine de l'art dramatique des fonctions d'assouplissement, proposant un mouvement spectaculaire et exagéré.
Ce qu'il fait : Les animations ELASTIC s'étirent et rebondissent avec une élasticité vive et exagérée, donnant aux éléments l'impression de bouger grâce à l'énergie et à la flexibilité d'un élastique. Cette fonction est parfaite pour créer des animations dynamiques et accrocheuses qui ajoutent une touche de fantaisie et de fun.

REBONDIR, REBONDIR

Origine et signification : Tout comme une balle qui rebondit, ces interactions imitent la physique du fait de rebondir contre une surface, Bounce Past ajoutant un peu de profondeur à l'effet dramatique.
Ce qu'il fait : Crée un effet ludique et captivant où les éléments rebondissent avant de se mettre en place. Cela donne de la vie et de l'énergie à la page.

BALANCER DE À, BALANCER DE, BALANCER VERS

Origine et signification : Imaginez un pendule ou une balançoire : ces interactions capturent l'essence du mouvement de balancement, que ce soit d'un côté à l'autre, en commençant ou en se terminant par une balançoire.
Ce qu'il fait : Ajoute un mouvement élégant et oscillant aux éléments, créant ainsi une sensation de rythme et de fluidité. Idéal pour attirer l'attention de manière subtile et sophistiquée.

En gros, l'histoire de l'assouplissement des fonctions est une fascinante saga d'innovations, mêlant art et science, reflétant la quête permanente de l'humanité pour reproduire la beauté et la complexité du mouvement dans ses créations