Ti presentiamo linear(), una funzione di easing in CSS che si interpola linearmente tra i suoi punti, consentendoti di ricreare gli effetti di rimbalzo e molla.
Easing in CSS
Durante l'animazione o la transizione di elementi in CSS, puoi controllare la frequenza di variazione di un valore con una funzione di easing utilizzando le proprietà animation-timing-function e transition-timing-function.
Nel 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 interpolazione, utilizza la funzione cubic-bezier() o adotta un approccio basato sui passaggi utilizzando la funzione di easing di steps().
Se utilizzati in modo appropriato, l'easing conferisce all'elemento animato un senso di peso che sembra acquisire slancio.
La creazione di curve complesse come gli effetti di rimbalzo o molla non è possibile in CSS, ma grazie a linear() puoi ora approssimarle in modo sorprendente.
Un'introduzione a linear()
Supporto dei browser
- 113
- 113
- 112
- x
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 che va da 0 a 1. Tra una fermata e l'altra l'interpolazione viene eseguita in modo lineare, spiegando il nome della funzione.
animation-timing-function: linear(0, 0.25, 1);
Per impostazione predefinita, queste fermate sono equidistanti. Nello snippet precedente, ciò significa che verrà utilizzato il valore di output di 0.25 in corrispondenza della tacca del 50%.
Visualizzato, il grafico di linear(0, 0.25, 1) ha il seguente aspetto:
Se non vuoi che le fermate siano suddivise in modo equidistante, puoi facoltativamente superare una durata della fermata. Quando trasmetti un valore come lunghezza della fermata, definisci il suo punto iniziale:
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 iniziale che quello finale:
animation-timing-function: linear(0, 0.25 25% 75%, 1);
Un valore di output di 0,25 verrà utilizzato dal 25% al 75% nel tempo.
Creare curve complesse con linear()
Anche se gli esempi precedenti sono molto semplici, puoi utilizzare linear() per ricreare funzioni di easing complesse in modo molto semplice, senza compromettere la precisione.
Prendiamo ad esempio questa curva di easing del rimbalzo, un tipo di easing che non può essere espresso direttamente in CSS, definita 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;
}
È possibile che il codice non ti dia molto, ma una visualizzazione potrebbe indicarlo. Ecco l'output, visualizzato come una curva blu:
La curva può essere semplificata aggiungendovi un numero di fermate. In questo caso, ogni punto verde indica una fermata:
Quando viene passato a linear(), il risultato è una curva simile a quella originale, ma un po' più ruvida sui bordi.
Confrontando il riquadro animato verde con quello blu, si evince che il riquadro non è uniforme.
Tuttavia, se aggiungi un numero sufficiente di fermate, puoi approssimare abbastanza bene la curva originale. Ecco una versione aggiornata:
Raddoppiando semplicemente il numero di fermate, ottieni già un risultato uniforme.
Il codice utilizzato per l'animazione ha il seguente aspetto:
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 che ti aiuta
Creare manualmente questo elenco di fermate sarebbe molto difficile. Per fortuna, Jake e Adam hanno creato uno strumento che ti aiuta a convertire una curva di interpolazione nella sua linear() controparte.
Lo strumento utilizza una funzione di easing JavaScript o una curva SVG come input e restituisce la curva semplificata utilizzando linear(). Utilizza i dispositivi di scorrimento per controllare il numero di fermate desiderato e la loro precisione.
In alto a destra, puoi anche scegliere una delle preimpostazioni: Primavera, Rimbalzo, Elastico semplice o Interpolazione enfatizzata con Material Design.
Supporto 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 le fermate.
Questa funzionalità DevTools è disponibile in DevTools con Chrome 114.
Foto di Howie Mapson su Unsplash