Le chemin vers un assouplissement impressionnant du CSS avec la fonction Linear() —

Pour paraphraser un dicton qui m’a toujours marqué : « La meilleure animation est celle qui passe inaperçue. » L’un des concepts les plus importants du motion design sur le Web est de faire en sorte que le mouvement « se sente bien ». Dans le même temps, CSS est assez limité lorsqu’il s’agit de créer des animations et des transitions naturelles et discrètes pour l’expérience utilisateur.

Heureusement, cela change. Aujourd’hui, examinons les nouvelles fonctionnalités d’assouplissement arrivant dans CSS. Plus précisément, je veux démontrer les superpouvoirs d’assouplissement du linear() — une nouvelle fonction d’assouplissement actuellement définie dans la spécification CSS Easing Level 2 du projet de l’éditeur. Ensemble, nous explorerons sa capacité à créer des courbes d’assouplissement personnalisées qui conduisent à un mouvement naturel de l’interface utilisateur.

Le fait que linear() est au statut de brouillon de l’éditeur signifie que nous plongeons dans quelque chose qui est encore en train de prendre forme et qui pourrait changer au moment où il atteindra la recommandation du candidat. Comme vous pouvez l’imaginer, cela signifie linear() a support limité à ce moment précis. Il est pris en charge dans Chrome et FirefoxCependant, assurez-vous de garder cela à l’esprit lorsque nous aborderons certaines démos.

Avant de nous lancer directement, je vous recommande de consulter quelques articles. Ils ont vraiment influencé ma façon d’aborder la conception animée de l’interface utilisateur dans son ensemble :

Il existe de nombreuses ressources intéressantes pour concevoir des mouvements dans l’interface utilisateur, mais ce sont deux que je garde toujours à portée de main dans les favoris de mon navigateur, et elles ont certainement influencé cet article.

L’état actuel de l’assouplissement du CSS

Nous définissons l’assouplissement CSS avec soit le animation-timing-function ou transition-timing-function propriétés, selon que l’on travaille respectivement avec une animation ou une transition.

La durée est une question de timing, et le timing a un impact important sur le naturel du mouvement.

Mais, jusqu’à récemment, CSS nous limitait aux fonctions d’assouplissement suivantes :

• linear,
• steps,
• ease,
• ease-in,
• ease-out,
• ease-in-out,
• cubic-bezier().

Pour un rappel, consultez cette démo qui montre l’effet de différents timings sur la façon dont cette voiture se déplace sur la piste.

Le cubic-bezier() Cette fonction offre traditionnellement le plus de flexibilité pour créer un assouplissement avec un peu de caractère. Le site cubique-bezier.com est une excellente ressource pour créer des fonctions d’assouplissement sur mesure. Sinon, déterminer les valeurs exactes de la courbe peut être une corvée.

C’est l’état actuel de l’assouplissement du CSS. Nous reviendrons sur les nouveautés brillantes dans un instant. Mais d’abord, je pense que c’est une bonne idée de revoir la façon dont les fonctions d’assouplissement influencent le comportement d’assouplissement dans les courbures.

Visualiser les courbes d’assouplissement

Nous pouvons visualiser différents assouplissements avec une courbe graphique. Le site assouplissements.net fait du bon travail en fournissant des options qui peuvent être utilisées avec le cubic-bezier() fonction de synchronisation.

Les courbes d’assouplissement peuvent également être visualisées dans Chromium DevTools, vous permettant d’inspecter n’importe quelle courbe appliquée à une transition ou une animation.

Mais que se passe-t-il si vous avez besoin de quelque chose d’un peu plus que ce qui est disponible ? Par exemple, qu’en est-il d’un rebond ? Ou un ressort ? Ce sont les types de fonctions d’assouplissement que nous ne pouvons pas réaliser avec un cubic-bezier() courbe.

C’est là que le nouveau linear() la fonction d’assouplissement entre en jeu, pionnier par Jake Archibald et défini dans le Spécification d’assouplissement CSS niveau 2, qui est actuellement dans le brouillon de l’éditeur. MDN le décrit bien :

Le linear() function définit une fonction linéaire par morceaux qui interpole linéairement entre ses points, vous permettant de vous rapprocher d’animations plus complexes telles que des effets de rebond et d’élasticité.

En d’autres termes, c’est un moyen de tracer un graphique avec autant de points que vous le souhaitez pour définir une courbe d’assouplissement personnalisée. C’est assez spécial et ouvre de nouvelles possibilités que nous ne pouvions pas faire auparavant avec les animations et transitions CSS.

Par exemple, l’assouplissement en cas de rebond pourrait ressembler à ceci :

:root {
  --bounce-easing: linear(
    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,
    1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,
    0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,
    0.973, 1, 0.988, 0.984, 0.988, 1
  );
}

Voici à quoi cela ressemble en action :

Un doux rappel que prise en charge du navigateur est limité à Chrome et Firefox, alors assurez-vous de visionner la démo dans l’un de ces navigateurs. Nous sommes seulement en attente sur Safari pour le moment, donc nous y sommes presque !

« Je ne travaille pas sur tout ça. »

Cet exemple d’assouplissement ressemble certainement à un grand nombre de chiffres sortis de nulle part, n’est-ce pas ? En ce qui concerne la complexité, nous avons affaire à quelque chose d’aussi effrayant que cubic-bezier() au premier coup d’œil. La bonne nouvelle, c’est qu’une fois que vous avez défini une facilité, il est peu probable que vous ayez à y toucher à nouveau… du moins pendant un moment. C’est plutôt une sorte de chose à régler et à oublier.

Mais comment pouvons-nous obtenir les chiffres en premier lieu ? Jake, l’esprit intelligent derrière linear()rassemblez un générateur en ligne cela fait tout le gros du travail pour nous. En fait, j’ai obtenu les valeurs d’assouplissement pour la démo de rebond directement à partir de l’outil pratique de Jake. Voici une lien permanent vers la sortie.

Où va tout cela ?

D’aussi loin que je me souvienne, si j’avais besoin d’un assouplissement spécial pour le travail que je fais, GreenSock a été ma solution de prédilection. C’est faciliter le visualiseur est l’un de mes exemples préférés de documentation interactive.

Dès que j’ai entendu parler du linear() fonction, mon esprit est allé directement à : « Comment puis-je convertir les fonctionnalités GreenSock en CSS ? » Imaginez à quel point ce serait génial d’avoir accès à un ensemble populaire de fonctionnalités pouvant être utilisées directement en CSS sans recourir à JavaScript.

Le visualiseur de GreenSock accepte JavaScript ou un chemin SVG. Donc, ma première pensée a été d’ouvrir DevTools, de récupérer les chemins SVG du visualiseur et de les déposer dans l’outil. Cependant, j’ai rencontré un obstacle car je devais réduire les coordonnées du chemin pour un viewBox de 0 0 1 1. Le visualiseur de GreenSock a un viewBox mis à 0 0 500 500. J’ai écrit une fonction pour convertir les coordonnées et inverser le chemin pour aller dans la bonne direction. Ensuite, j’ai contacté Jake pour lui poser quelques questions sur le générateur. Le code est disponible sur GitHub.

Dans ma tête, je pensais que la voie SVG avait du sens. Mais alors je créé un chemin cela ne fonctionnerait pas dans l’outil. J’ai donc contacté Jake et nous avons tous les deux pensé que le problème était un bug de l’outil.

Jake a alors demandé : « Pourquoi devez-vous passer par SVG ? Sa question était pertinente ! L’entrée JavaScript de l’outil attend une fonction d’assouplissement. Une fonction d’assouplissement mappe le temps à une valeur de progression. Et nous pouvons obtenir les fonctions d’assouplissement directement de GreenSock et les transmettre au générateur. Jake a réussi à creuser le back fonction d’assouplissement de le dépôt GreenSock GitHub et créer l’assouplissement Au départ, je recherchais.

Génération de fonctionnalités GSAP pour CSS

Maintenant que je vous ai donné un aperçu du contexte, nous disposons de toutes les pièces du puzzle dont nous avons besoin pour créer quelque chose qui puisse convertir l’assouplissement GSAP en code CSS.

Tout d’abord, nous extrayons les pièces du linear() outil générateur dans un script. L’idée est de parcourir un ensemble de clés et de générer un bloc de CSS avec linear() assouplissements. GreenSock a une belle méthode utilitaire appelée parseEase. Il prend une chaîne et renvoie la fonction d’assouplissement. Les chaînes acceptées sont les fonctions d’assouplissement de GreenSock.

const ease = gsap.parseEase('power1.in')
ease(0.5) // === 0.25

Comme cela boucle sur un objet avec différentes fonctions d’accélération, nous pouvons les transmettre dans le code extrait de l’outil. Nous modifions ce code extrait selon nos besoins.

const easings=""
const simplified = 0.0025
const rounded = 4
const EASES = {
  'power-1--out': gsap.parseEase('power1.out')
  // Other eases
}
// Loop over the easing keys and generate results.
for (const key of Object.keys(EASES)) {
  // Pass the easing function through the linear-generator code.
  const result = processEase(key, EASES[key])
  const optimised = useOptimizedPoints(result.points, simplified, rounded)
  const linear = useLinearSyntax(optimised, rounded)
  const output = useFriendlyLinearCode(linear, result.name, 0)
  easings += output
}
// Generate an output CSS string.
let outputStart=":root {"
let outputEnd = '}' 
let styles = `
  ${outputStart}
  ${easings}
  ${outputEnd}
`
// Write it to the body.
document.body.innerHTML = styles

Les fonctions que nous avons extraites du générateur linéaire font différentes choses :

• processEase
  Il s’agit d’une version modifiée de processScriptData. Il prend les fonctions d’assouplissement et renvoie des points pour notre graphique.
• useOptimizedPoints
  Cela optimise ces points en fonction du simplied et rounded valeurs. C’est là que j’ai découvert le Douglas Peucker algorithme de Jake.
• useLinearSyntax
  Cela prend les points optimisés et renvoie les valeurs du linear() fonction.
• useFriendlyLinearCode
  Cela prend le linear valeurs et renvoie une chaîne CSS que nous pouvons utiliser avec le nom de la propriété personnalisée de l’aisance.

Il convient de noter que j’ai essayé de ne pas trop y toucher. Mais c’est aussi ça vaut le coup de creuser et déposer un point d’arrêt ou console.info à différents endroits pour comprendre comment les choses fonctionnent.

Après avoir exécuté les choses, le résultat nous donne des variables CSS contenant le linear() assouplissement des fonctions et des valeurs. L’exemple suivant montre les atténuations élastiques et de rebond.

:root {
  --elastic-in: linear( 0, 0.0019 13.34%, -0.0056 27.76%, -0.0012 31.86%, 0.0147 39.29%, 0.0161 42.46%, 0.0039 46.74%, -0.0416 54.3%, -0.046 57.29%, -0.0357, -0.0122 61.67%, 0.1176 69.29%, 0.1302 70.79%, 0.1306 72.16%, 0.1088 74.09%, 0.059 75.99%, -0.0317 78.19%, -0.3151 83.8%, -0.3643 85.52%, -0.3726, -0.3705 87.06%, -0.3463, -0.2959 89.3%, -0.1144 91.51%, 0.7822 97.9%, 1 );
  --elastic-out: linear( 0, 0.2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, 0.941 24.01%, 0.8912 25.91%, 0.8694 27.84%, 0.8698 29.21%, 0.8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, 0.9961 53.26%, 0.9839 57.54%, 0.9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, 0.9981 86.66%, 1 );
  --elastic-in-out: linear( 0, -0.0028 13.88%, 0.0081 21.23%, 0.002 23.37%, -0.0208 27.14%, -0.023 28.64%, -0.0178, -0.0061 30.83%, 0.0588 34.64%, 0.0651 35.39%, 0.0653 36.07%, 0.0514, 0.0184 38.3%, -0.1687 42.21%, -0.1857 43.04%, -0.181 43.8%, -0.1297 44.93%, -0.0201 46.08%, 1.0518 54.2%, 1.1471, 1.1853 56.48%, 1.1821 57.25%, 1.1573 58.11%, 0.9709 62%, 0.9458, 0.9347 63.92%, 0.9349 64.61%, 0.9412 65.36%, 1.0061 69.17%, 1.0178, 1.023 71.36%, 1.0208 72.86%, 0.998 76.63%, 0.9919 78.77%, 1.0028 86.12%, 1 );
    --bounce-in: linear( 0, 0.0117, 0.0156, 0.0117, 0, 0.0273, 0.0468, 0.0586, 0.0625, 0.0586, 0.0468, 0.0273, 0 27.27%, 0.1093, 0.1875 36.36%, 0.2148, 0.2343, 0.2461, 0.25, 0.2461, 0.2344, 0.2148 52.28%, 0.1875 54.55%, 0.1095, 0, 0.2341, 0.4375, 0.6092, 0.75, 0.8593, 0.9375 90.91%, 0.9648, 0.9843, 0.9961, 1 );
  --bounce-out: linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%, 0.1407, 0.25, 0.3908, 0.5625, 0.7654, 1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657, 0.7539, 0.75, 0.7539, 0.7657, 0.7852, 0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532, 0.9414, 0.9375, 0.9414, 0.9531, 0.9726, 1, 0.9883, 0.9844, 0.9883, 1 );
  --bounce-in-out: linear( 0, 0.0078, 0, 0.0235, 0.0313, 0.0235, 0.0001 13.63%, 0.0549 15.92%, 0.0938, 0.1172, 0.125, 0.1172, 0.0939 27.26%, 0.0554 29.51%, 0.0003 31.82%, 0.2192, 0.3751 40.91%, 0.4332, 0.4734 45.8%, 0.4947 48.12%, 0.5027 51.35%, 0.5153 53.19%, 0.5437, 0.5868 57.58%, 0.6579, 0.7504 62.87%, 0.9999 68.19%, 0.9453, 0.9061, 0.8828, 0.875, 0.8828, 0.9063, 0.9451 84.08%, 0.9999 86.37%, 0.9765, 0.9688, 0.9765, 1, 0.9922, 1 );
}

Nous sommes capables d’ajuster cette sortie selon le désir de notre cœur avec différentes touches ou précisions. Ce qui est vraiment cool, c’est que nous pouvons maintenant laissez tomber ces facilités GreenSock en CSS !

Comment obtenir votre propre CSS linear() Facilité

Voici un petit outil que j’ai mis en place. Il vous permet de sélectionner le type d’animation que vous souhaitez, d’appliquer un linear() facilitez-le et déterminez sa vitesse. À partir de là, retournez la carte pour afficher et copier le code généré.

Dans les cas où linear() n’est pas pris en charge par un navigateur, nous pourrions utiliser une valeur de secours pour faciliter l’utilisation @supports:

:root {
  --ease: ease-in-out;
}
@supports(animation-timing-function: linear(0, 1)) {
  :root {
    --ease: var(--bounce-easing);
  }
}

Et juste pour le plaisir, voici une démo qui prend la chaîne de facilité GreenSock comme entrée et vous donne le linear() fonction retour. Essayez quelque chose comme elastic.out(1, 0.1) et voyez ce qui se passe !

Bonus : facilités linéaires pour le vent arrière

Vous ne pensez pas que nous laisserions de côté ceux d’entre vous qui utilisent Tailwind, n’est-ce pas ? Aucune chance. En fait, étendre Tailwind avec nos facilités personnalisées ne pose aucun problème.

/** @type {import('tailwindcss').Config} */
const plugin = require('tailwindcss/plugin')
const EASES = {
  "power1-in": "linear( 0, 0.0039, 0.0156, 0.0352, 0.0625, 0.0977, 0.1407, 0.1914, 0.2499, 0.3164, 0.3906 62.5%, 0.5625, 0.7656, 1 )",
  /* Other eases */
}
const twease = plugin(
  function ({addUtilities, theme, e}) {
    const values = theme('transitionTimingFunction')
    var utilities = Object.entries(values).map(([key, value]) => {
      return {
        [`.${e(`animation-timing-${key}`)}`]: {animationTimingFunction: `${value}`},
      }
    })
    addUtilities(utilities)
  }
)
module.exports = {
  theme: {
    extend: {
      transitionTimingFunction: {
        ...EASES,
      }
    },
  },
  plugins: [twease],
}

j’ai assembler quelque chose dans Tailwind Play pour que vous puissiez voir cela en action et faire quelques expériences. Cela vous donnera des cours comme animation-timing-bounce-out et ease-bounce-out.

Conclusion

CSS n’offre traditionnellement qu’un contrôle limité sur le timing des animations et des transitions. La seule façon d’obtenir le comportement souhaité était de recourir à des solutions JavaScript. Eh bien, cela va bientôt changer, grâce au assouplir les superpuissances du nouveau linear() fonction de synchronisation qui est défini dans le projet de spécification CSS Easing Level 2. Assurez-vous d’inclure ces transitions dans vos démos, et j’ai hâte de voir ce que vous en ferez !

Restez génial. ┬┴┬┴┤•ᴥ•ʔ├┬┴┬┴

(gg, ouais)