Punti salienti
- 01Trascina i due punti di controllo per modellare la curva di easing visivamente invece di indovinare valori numerici.
- 02Un'animazione live della pallina riproduce il timing in modo da sentire il movimento prima di confermarlo.
- 03Tutti e cinque i preset CSS incorporati (ease, linear, ease-in, ease-out, ease-in-out) sono disponibili come punti di partenza.
- 04Il valore cubic-bezier() si aggiorna in tempo reale con precisione a due decimali, pronto per essere incollato in qualsiasi proprietà CSS.
Perché le Curve di Easing Personalizzate Sono Importanti per il Movimento dell'UI
Le funzioni di timing incorporate di CSS — ease, ease-in-out, linear — coprono molti casi, ma ogni interfaccia ha momenti in cui il valore predefinito sembra leggermente sbagliato. Un tooltip che appare troppo velocemente, una modale che va oltre all'apertura, una barra di progresso che sembra meccanica. Le curve cubic-bezier ti permettono di regolare il movimento per farlo sembrare naturale piuttosto che meccanico, ma i quattro numeri in cubic-bezier(0.4, 0, 0.2, 1) sono quasi impossibili da interpretare direttamente.
L'editor cubic-bezier di Handytool trasforma questi numeri in una curva visuale con due punti di controllo trascinabili. Sposta un punto e l'animazione della pallina si riproduce immediatamente, così puoi iterare per sensazione fino a quando il movimento corrisponde alla tua intenzione. Poi copia il valore e inseriscilo nel tuo CSS — fatto.
Come Progettare una Curva di Easing CSS
- 01
Inizia da un preset
Seleziona ease, linear, ease-in, ease-out o ease-in-out come base. I punti di controllo si posizionano automaticamente alle posizioni corrette per ogni preset.
- 02
Trascina i punti di controllo
Ogni punto controlla un'estremità della curva — il punto iniziale modella l'accelerazione iniziale, il punto finale modella la decelerazione finale. Spostare un punto cambia automaticamente il preset a 'personalizzato'.
- 03
Guarda l'animazione della pallina
Una pallina si anima da sinistra a destra usando la tua curva. Regola il cursore della durata per visualizzare transizioni lente rispetto a veloci.
- 04
Sperimenta con l'overshoot
Trascina un punto dell'asse Y sopra 1 o sotto 0 per creare overshoot e undershoot — l'effetto 'rimbalzante' che fa aprire un menu energicamente.
- 05
Copia il valore CSS
Fai clic su Copia per ottenere la stringa cubic-bezier() e incollala in transition-timing-function o animation-timing-function nel tuo foglio di stile.
Funziona Interamente nel Tuo Browser
L'editor è uno strumento autonomo del browser — nessun font, script o dato viene caricato dopo l'apertura della pagina. Trascinare i punti di controllo e visualizzare le animazioni funziona offline. La formula cubic-bezier utilizzata per la pallina di anteprima è la stessa che i browser utilizzano per le transizioni CSS, quindi quello che vedi nell'editor è esattamente quello che il tuo foglio di stile produrrà.
Non c'è nulla da installare e nulla per cui registrarsi. L'output è un singolo valore CSS — incollalo e hai finito.
Domande Frequenti sull'Editor Cubic-Bezier
Cos'è una curva di easing cubic-bezier?
È una curva matematica definita da due punti di controllo che determina come una transizione o animazione CSS accelera nel tempo. I quattro numeri in cubic-bezier(x1, y1, x2, y2) impostano le posizioni di questi punti di controllo.
Perché i valori Y possono andare sopra 1 o sotto 0?
I valori Y al di fuori di 0–1 producono overshoot e undershoot — la curva va oltre il suo endpoint prima di stabilizzarsi. Questo crea curve di easing 'rimbalzanti'. I valori X devono rimanere in 0–1.
Come uso l'output?
Copia la stringa cubic-bezier(...) e incollala in qualsiasi valore transition-timing-function o animation-timing-function CSS. Funziona in ogni browser moderno.
Cosa significa esattamente ease-in-out?
Ease-in-out inizia lentamente, accelera nel mezzo e rallenta alla fine — cubic-bezier(0.42, 0, 0.58, 1). Rispecchia come gli oggetti reali accelerano e decelerano ed è la scelta predefinita per la maggior parte del movimento dell'UI raffinato.
L'anteprima dell'animazione della pallina è accurata rispetto a CSS?
Sì — l'anteprima utilizza la stessa formula cubic bezier che i browser applicano alle transizioni CSS. Il cursore della durata ti permette di sentire curve lente rispetto a veloci prima di confermare.