Créer des courbes d'animation complexes en CSS avec la fonction de lissage de vitesse linear()

Présentation de linear(), une fonction de lissage de vitesse en CSS qui effectue une interpolation linéaire entre ses points, ce qui vous permet de recréer des effets de rebond et de rebond.

Bramus

Lissages de vitesse en CSS

Lorsque vous animez ou effectuez des transitions d'éléments dans CSS, vous pouvez contrôler la vitesse à laquelle une valeur change à l'aide d'une fonction de lissage de vitesse à l'aide des propriétés animation-timing-function et transition-timing-function.

Plusieurs mots clés sont disponibles sous forme de préréglages dans CSS : linear, ease, ease-in, ease-out et ease-in-out. Pour créer vos propres courbes de lissage de vitesse, utilisez la fonction cubic-bezier() ou adoptez une approche basée sur les pas à l'aide de la fonction de lissage de vitesse steps().

Lorsqu'ils sont utilisés à bon escient, les lissages de vitesse donnent à un élément animé une impression de poids, car il semble prendre du mouvement.

Il n'est pas possible de créer des courbes complexes telles que des effets de rebond ou de rebond en CSS, mais grâce à linear(), vous pouvez désormais les rapprocher d'une façon étonnante.

Présentation de linear()

Vous pouvez désormais définir un lissage de vitesse en CSS à l'aide de linear(). Cette fonction accepte un certain nombre d'arrêts, séparés par une virgule. Chaque arrêt est indiqué sous la forme d'un numéro compris entre 0 et 1. Entre chaque arrêt, l'interpolation est effectuée de manière linéaire, en expliquant le nom de la fonction.

animation-timing-function: linear(0, 0.25, 1);

Par défaut, ces arrêts sont répartis équidistantement. Dans l'extrait précédent, cela signifie que la valeur de sortie de 0.25 sera utilisée au bout de 50 %.

Voici à quoi ressemble le graphique pour linear(0, 0.25, 1):

Si vous ne souhaitez pas que les arrêts soient répartis équidistantement, vous pouvez indiquer une longueur d'arrêt. Lorsque vous indiquez une valeur en tant que longueur d'arrêt, vous définissez son point de départ:

animation-timing-function: linear(0, 0.25 75%, 1);

Ici, une valeur de sortie de 0.25 ne sera pas utilisée au niveau 50%, mais à 75%.

Lorsque vous spécifiez deux valeurs pour la longueur d'un arrêt, vous définissez à la fois son point de départ et son point d'arrivée:

animation-timing-function: linear(0, 0.25 25% 75%, 1);

Une valeur de sortie de 0,25 sera utilisée entre 25% et 75% dans le temps.

Créer des courbes complexes avec linear()

Bien que les exemples ci-dessus soient des lissages de vitesse très simples, vous pouvez utiliser linear() pour recréer des fonctions de lissage de vitesse complexes de manière très simple, sans toutefois perdre une certaine précision.

Prenons cette courbe de lissage de vitesse, un type de lissage de vitesse qui ne peut pas être exprimé directement dans CSS, défini à l'aide de JavaScript:

function easing(pos) {
  const t = 7.5625;
  const e = 2.75;
  return pos < 1 / e
    ? t * pos * pos
    : pos < 2 / e
    ? t * (pos -= 1.5 / e) * pos + 0.75
    : pos < 2.5 / e
    ? t * (pos -= 2.25 / e) * pos + 0.9375
    : t * (pos -= 2.625 / e) * pos + 0.984375;
}

Même si le code ne vous en dit pas grand-chose, une visualisation le peut. Voici la sortie, représentée sous la forme d'une courbe bleue:

Vous pouvez simplifier la courbe en y ajoutant un certain nombre d'arrêts. Chaque point vert représente un arrêt:

Lorsqu'il est transmis à linear(), le résultat produit une courbe semblable à celle d'origine, mais un peu plus rugueuse sur les bords.

Comparez la boîte animée verte à la boîte bleue, vous pouvez voir qu'elle n'est pas aussi fluide.

Cependant, si vous ajoutez suffisamment d'arrêts, la courbe d'origine pourra se rapprocher de façon assez précise. Voici une version mise à jour:

En doublant simplement le nombre d'arrêts, vous obtenez déjà un résultat fluide.

Voici à quoi ressemble le code utilisé pour l'animation:

animation-timing-function: linear(
  /* Start to 1st bounce */
  0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
  /* 1st to 2nd bounce */
  0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
  /* 2nd to 3rd bounce */
  0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
  /* 3rd bounce to end */
  0.988, 0.984, 0.988, 1
);

Un outil pour vous aider

La création manuelle de cette liste d'arrêts peut s'avérer très fastidieuse. Heureusement, Jake et Adam ont créé un outil pour vous aider à convertir une courbe de lissage de vitesse en son équivalent linear().

L'outil prend comme entrée une fonction de lissage de vitesse JavaScript ou une courbe SVG et génère la courbe simplifiée à l'aide de linear(). Contrôlez le nombre d'arrêts souhaités et leur précision à l'aide des curseurs.

En haut à droite, vous pouvez également choisir l'une des préréglages : "Spring", "Rebond", "Simple élastic" ou "Material Design" avec lissage de vitesse avec mise en avant sont inclus.

Compatibilité avec les outils de développement

Les outils de développement permettent de visualiser et de modifier le résultat de linear(). Cliquez sur l'icône pour afficher une info-bulle interactive vous permettant de parcourir les arrêts.

Cette fonctionnalité est disponible dans les outils de développement fournis avec Chrome 114.

Photo par Howie Mapson sur Unsplash