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

Ti presentiamo linear(), una funzione di accelerazione in CSS che esegue l'interpolazione lineare tra i suoi punti, consentendoti di ricreare effetti di rimbalzo ed elasticità.

Bramus

Funzioni di trasferimento in CSS

Quando animi o esegui la transizione di elementi in CSS, controlli la velocità con cui un valore cambia con una funzione di easing utilizzando le proprietà animation-timing-function e transition-timing-function.

In CSS sono disponibili diverse parole chiave come preimpostazioni, ovvero linear, ease, ease-in, ease-out e ease-in-out. Per creare le tue curve di andamento, utilizza la funzione cubic-bezier() oppure adotta un approccio basato sui passaggi utilizzando la funzione di andamento steps().

Se utilizzati in modo appropriato, gli easing danno a un elemento animato un senso di peso mentre sembra acquisire slancio.

La creazione di curve complesse come gli effetti di rimbalzo o molla non è possibile in CSS, ma grazie a linear() ora puoi approssimarle in modo sorprendente.

Introduzione a linear()

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

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

Queste fermate sono distribuite in modo equidistante per impostazione predefinita. Nello snippet precedente, ciò significa che il valore di output di 0.25 verrà utilizzato al 50%.

Visualizzato, il grafico per linear(0, 0.25, 1) ha questo aspetto:

Se non vuoi che le fermate siano equidistanti, puoi facoltativamente specificare una durata della fermata. Quando passi un valore come lunghezza di interruzione, ne definisci il punto di partenza:

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

In questo caso, un valore di output di 0.25 non verrà utilizzato al segno 50%, ma verrà utilizzato al segno 75%.

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

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

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

Creare curve complesse

Mentre gli esempi precedenti sono semplificazioni più semplici, puoi utilizzare linear() per ricreare funzioni di accelerazione complesse se comprometti parte della precisione.

Prendi questa curva di accelerazione di rimbalzo, un tipo di accelerazione che non può essere espresso direttamente in CSS, definito utilizzando 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 dirti molto, una visualizzazione potrebbe. Ecco l'output, visualizzato come una curva blu:

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

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

Se confronti il riquadro verde animato con quello blu, noterai che non è altrettanto fluido.

Tuttavia, se aggiungi un numero sufficiente di punti di controllo, puoi approssimare la curva originale in modo abbastanza preciso. Ecco una versione aggiornata:

Raddoppiando semplicemente il numero di punti di controllo, si ottiene già un risultato uniforme.

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 complicato. Per fortuna, Jake e Adam hanno creato uno strumento per aiutarti a convertire una curva di accelerazione 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 che vuoi e la loro precisione.

In alto a destra, puoi anche scegliere uno dei preset inclusi: Molla, Rimbalzo, Semplice elastico o Material Design con enfasi sull'accelerazione.

Supporto di DevTools

In DevTools è disponibile il supporto per visualizzare e modificare il risultato di linear(). Fai clic sull'icona per visualizzare un suggerimento interattivo che ti consente di trascinare le fermate.

Questa funzionalità di DevTools è disponibile in DevTools a partire da Chrome 114.