Creare curve di animazione complesse in CSS con la funzione di easing linear()

linear() è una funzione di easing in CSS che interpola linearmente i punti in modo da ricreare gli effetti di rimbalzo e primaverili.

Bramus

Easing in CSS

Quando anima o trasferisci elementi in CSS, puoi controllare la frequenza di modifica di un valore con una funzione di easing usando le proprietà animation-timing-function e transition-timing-function.

Sono disponibili diverse parole chiave preimpostate in CSS, vale a dire linear, ease, ease-in, ease-out e ease-in-out. Per creare le tue curve di easing, utilizza la funzione cubic-bezier() oppure un approccio basato su passaggi con la funzione di easing steps().

Se utilizzati in modo appropriato, l'easing conferisce a un elemento animato un senso di peso in quanto sembra raccogliere slancio.

In CSS non è possibile creare curve complesse come gli effetti di rimbalzo o primaverili, ma grazie a linear() ora puoi approssimarle in modo stupefacente.

Introduzione a linear()

Un nuovo modo per definire un easing in CSS è tramite linear(). Questa funzione accetta un numero di fermate, separate da virgole. Ogni fermata è un singolo numero compreso tra 0 e 1. Tra una fermata e l'altra l'interpolazione viene eseguita in modo lineare e spiega il nome della funzione.

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

Per impostazione predefinita, queste fermate sono distribuite equidistanti. Nello snippet precedente, ciò significa che il valore di output 0.25 verrà utilizzato in corrispondenza della soglia del 50%.

Visualizzato, il grafico di linear(0, 0.25, 1) ha il seguente aspetto:

Se non vuoi che le fermate siano distanti e equidistanti, puoi scegliere di passare di una lunghezza delle fermate. Quando passi un valore come lunghezza di una fermata, definisci il suo punto di partenza:

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

In questo caso, il valore di output 0.25 non verrà utilizzato in corrispondenza del contrassegno 50%, ma in corrispondenza di 75%.

Quando specifichi due valori come lunghezza della fermata, definisci sia il punto di partenza che quello di arrivo:

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

Un valore di output pari a 0,25 verrà utilizzato dal 25% al 75% nel tempo.

Creare curve complesse con linear()

Anche se gli esempi precedenti sono molto semplici, puoi usare linear() per ricreare funzioni di easing complesse in modo molto semplice, con il rischio di perdere una certa precisione.

Prendiamo questa curva di easing del rimbalzo, un tipo di easing che non può essere espresso direttamente in CSS, definito tramite 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;
}

Anche se il codice potrebbe non darti molto, una visualizzazione potrebbe farlo. Ecco l'output, visualizzato come una curva blu:

La curva può essere semplificata aggiungendovi un numero di fermate. In questo caso, ogni pallino verde indica una fermata:

Se passato in linear(), il risultato è una curva che sembra simile a quella originale, ma è un po' più ruvida sui bordi.

Confronta il riquadro animato verde con quello blu, puoi capire che non è uniforme.

Tuttavia, se si aggiunge un numero sufficiente di fermate è possibile approssimare la curva originale abbastanza bene. Ecco una versione aggiornata:

Raddoppiando semplicemente il numero di scali, ottieni già un risultato senza problemi.

Il codice utilizzato per l'animazione è simile al seguente:

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
);

Uno strumento per aiutarti

Creare manualmente questo elenco di fermate sarebbe molto complesso. Fortunatamente, Jake e Adam hanno creato uno strumento per aiutarti a convertire una curva di easing nella sua controparte linear().

Lo strumento prende come input una funzione di easing JavaScript o una curva SVG e restituisce la curva semplificata utilizzando linear(). Utilizza i cursori per controllare il numero di fermate desiderato e la loro precisione.

In alto a destra puoi anche scegliere una delle preimpostazioni: Primavera, Rimbalzo, Elastic semplice o L'interpolazione enfatizzata Material Design.

Assistenza per DevTools

In DevTools è disponibile il supporto per visualizzare e modificare il risultato di linear(). Fai clic sull'icona per visualizzare una descrizione comando interattiva che ti consente di trascinare intorno alle fermate.

Questa funzionalità di DevTools è disponibile nella distribuzione di DevTools con Chrome 114.

Foto di Howie Mapson su Unsplash