Generatore cubico di Bezier

Digitare cubic-bezier(x1, y1, x2, y2) a mano e ricaricare la pagina per verificarne la sensazione è un modo lento per ottimizzare un'animazione. Questo generatore chiude il ciclo: trascina la maniglia del punto di controllo sulla curva o digita i numeri esatti nei campi x1/y1/x2/y2 e la curva, la stringa CSS copiabile e l'anteprima dell'animazione dal vivo si aggiornano a ogni modifica: nessun passaggio di creazione, nessun ricaricamento.

I due assi funzionano volutamente in modo diverso. x1 e x2 rimangono bloccati tra 0 e 1, perché questo è ciò che le specifiche CSS richiedono effettivamente a una funzione di temporizzazione cubic-bezier(): un valore al di fuori di tale intervallo è semplicemente non valido. y1 e y2 non hanno tale limite: trascina una maniglia sopra la parte superiore della casella o sotto il fondo e la curva supera il suo inizio o la sua fine, che è esattamente il modo in cui gli effetti di molla e di rimbalzo vengono costruiti da un'unica curva di allentamento.

Vedere un numero non è la stessa cosa che vedere il movimento, quindi l'anteprima fa scorrere due palline identiche affiancate in un ciclo: una si muove utilizzando la curva personalizzata, l'altra si muove a un ritmo lineare e costante. Guardarli correre è il modo più veloce per capire se una curva di allentamento produce effettivamente la sensazione desiderata, prima ancora che raggiunga un foglio di stile. Le pagine preimpostate - i numeri reali dietro la parola chiave easy-in-out dei CSS, un'onesta approssimazione del superamento che alcuni chiamano rimbalzo e la curva standard di Material Design pubblicata da Google - sono punti di partenza pronti da cui è possibile trascinare anziché punti di controllo vuoti.

Tutto viene eseguito localmente nel tuo browser: nessun caricamento, nessun account, nessun server di andata e ritorno e il generatore continua a funzionare offline una volta caricata la pagina.