Categoria: Sviluppo
Generatore Cubic Bezier
Progetta una curva di easing CSS personalizzata
Trascina due punti di controllo per modellare una funzione di timing cubic-bezier(), osserva la curva e un'anteprima in movimento aggiornarsi dal vivo, e copia la dichiarazione finale di animation-timing-function. La curva viene calcolata nel tuo browser.
Progressione al 50% della durata: 0.802
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.
A cosa serve
L'easing di una transizione o animazione CSS è una curva di bezier cubica da (0,0) a (1,1): i due punti intermedi decidono se il movimento parte lento e finisce veloce, va oltre il bersaglio, o qualcos'altro. Le parole chiave predefinite (ease, ease-in-out e così via) sono solo cinque punti fissi in quello spazio. Questo strumento traccia la curva a partire dai due punti di controllo che imposti, mostra un box che si muove con quella precisa funzione di timing, e riporta a che punto del movimento si trova il progresso con easing esattamente a metà della durata, il numero più difficile da immaginare guardando solo la curva.
Come si usa
- Parti da una preimpostazione o imposta direttamente i due punti di controllo.
- Osserva la curva e l'anteprima in movimento aggiornarsi.
- Copia la dichiarazione cubic-bezier() nella tua transizione o animazione.
Privacy
Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.
Domande frequenti
- Viene calcolato qualcosa su un server?
- No. La curva, l'anteprima in movimento e il valore di progresso sono tutti calcolati da JavaScript eseguito nella pagina.
- Perché i due valori X sono limitati tra 0 e 1?
- X rappresenta il tempo trascorso, e la specifica CSS richiede che avanzi in avanti da 0 a 1 perché la curva resti una funzione valida del tempo. Y è il progresso con easing e può scendere sotto 0 o salire sopra 1, ed è così che si costruisce un effetto di superamento o di rimbalzo.
- Cosa significa il valore a metà durata?
- È il progresso con easing, non quello lineare, nel momento in cui è trascorsa esattamente metà della durata dell'animazione. Un valore sopra il 50% in quel punto significa che il movimento è già avanti rispetto a un ritmo lineare a metà percorso.