Come funziona il generatore cubic-bezier
Il generatore cubic-bezier di ToolMole offre un canvas interattivo dove puoi trascinare i punti di controllo e modificare facilmente i quattro parametri della funzione cubic-bezier. Ogni modifica viene visualizzata in tempo reale: un elemento animato mostra l’effetto della curva di easing che hai appena settato.
La funzione cubic-bezier serve a regolare la progressione temporale di animazioni CSS. Modificando i valori dei punti di controllo, puoi ottenere effetti come accelerazione, decelerazione, overshoot e rimbalzi.
Scelta e anteprima della curva di easing
La scelta della curva giusta dipende dal tipo di interazione: per transizioni fluide e naturali, si usano curve dolci; per effetti dinamici, si possono impostare y fuori dal range 0–1 per ottenere overshoot e bounce.
Lo strumento mostra una demo animata, così puoi valutare in tempo reale il risultato. Inoltre, puoi variare la durata dell’animazione per vedere come cambia la percezione del movimento, adattando il tutto alle esigenze del progetto.
Limiti, compatibilità e privacy
Il generatore supporta solo il formato cubic-bezier; non esporta in altri formati né integra altre funzioni di easing. I valori x sono sempre tra 0 e 1 per garantire una progressione temporale valida, mentre i valori y possono essere anche fuori da questo intervallo.
Tutta la procedura avviene nel browser: nessun dato viene caricato o conservato esternamente. Il codice cubic-bezier generato è compatibile con tutti i browser che supportano le animazioni CSS standard.
Domande frequenti
Come si sceglie la curva cubic-bezier giusta per un’animazione?
La scelta dipende dal tipo di interazione. Curve dolci e progressive sono ideali per transizioni naturali, mentre valori y estremi possono simulare effetti come overshoot e rimbalzo. Provare diverse opzioni e valutarle con l’anteprima aiuta a individuare la curva più adatta.
Posso creare effetti di overshoot o bounce?
Sì, puoi impostare valori y fuori dal range 0–1 per produrre rimbalzi o overshoot. Il generatore consente questa regolazione, mantenendo i valori x tra 0 e 1 per una progressione del tempo corretta.
Qual è la durata consigliata per le transizioni UI?
Per transizioni di interfaccia, la durata ideale varia tra 150 ms e 500 ms a seconda del contesto. Transizioni brevi sono più adatte per feedback immediato, mentre effetti più complessi possono richiedere tempi leggermente superiori.
Il tool carica dati o salva le mie curve?
No, tutte le operazioni avvengono localmente nel browser. Non viene inviato alcun dato e le curve non vengono memorizzate o salvate su server esterni.
Il codice cubic-bezier generato è compatibile con tutti i browser?
Sì, il codice prodotto può essere usato in qualsiasi browser moderno che supporta animazioni CSS, inclusi Chrome, Firefox, Safari e Edge.
Posso visualizzare l’animazione con durate diverse?
Sì, puoi modificare la durata direttamente nello strumento e vedere come la curva influisce sull’animazione in tempo reale.
Qualcosa non va o hai un'idea per questo strumento? Scrivici