Punctele cheie
- 01Trage mânele punctelor de control pentru a sculpla curba de easing vizual mai degrabă decât ghicire valori numerice.
- 02O animație minge live se redă sincronizarea deci poți simți mișcarea înainte de a te angaja în ea.
- 03Toate cinci preset-urile CSS încorporate (ease linear ease-in ease-out ease-in-out) sunt disponibile ca puncte de plecare.
- 04Valoarea cubic-bezier() se actualizează live cu precizie doi zecimali gata să fie lipită în orice proprietate CSS.
De Ce Curbele Custom Easing Conteaza pentru Mișcarea UI
Funcțiile de sincronizare încorporate ale CSS — ease ease-in-out linear — acoperă mult teren dar fiecare UI are momente în care cea implicită simte ușor greșit. Un tooltip care apare prea instantaneu o modală care depășește la deschidere o bară de progres care simte mecanică. Curbele cubic-bezier te lasă să reglezi mișcarea să simtă naturală mai degrabă decât mecanică dar cele patru numere din cubic-bezier(0.4 0 0.2 1) sunt aproape imposibil de raționat direct.
Editorul cubic-bezier al Handytool transformă acele numere într-o curbă vizuală cu două mânere tragi. Mișcă o mână și animația mingii se redă imediat deci poți itera după simțire până mișcarea se potrivește intenției. Apoi copiază valoarea și aruncă-o în CSS — gata.
Cum Să Proiectezi o Curbă de Easing CSS
- 01
Începe dintr-un preset
Selectează ease linear ease-in ease-out sau ease-in-out ca linie de bază. Mânele se fixează la pozițiile corecte pentru fiecare preset.
- 02
Trage mânele punctelor de control
Fiecare mână controlează un capăt al curbei — mâna de început modelează accelerația inițială mâna de final modelează decelerația finală. Mutarea unei mâini comută preset-ul în 'personalizat' automat.
- 03
Vizionează animația mingii
O minge se animează de la stânga la dreapta folosind curba. Ajustează glisierul de durată pentru a previzualiza tranziții lente versus rapide.
- 04
Experimentează cu overshoot
Trage o mână Y-axă deasupra 1 sau sub 0 pentru a crea overshoot și undershoot — efectul 'bouncy' care face un meniu să se deschidă energic.
- 05
Copiază valoarea CSS
Apasă Copiere pentru a prelua șirul cubic-bezier() și lipește-l în transition-timing-function sau animation-timing-function în stylesheet.
Se Execută Complet în Browser
Editorul este o unealtă self-contained pentru browser — nu sunt fonte nu sunt scripturi și nu sunt date încărcate după ce pagina se deschide. Tragerea mânelor și previzualizarea animațiilor funcționează offline. Formula cubic-bezier utilizată pentru mingea previzualizării este aceeași pe care browserele o folosesc pentru tranziții CSS deci ceea ce vezi în editor este exact ceea ce stylesheet-ul tău va produce.
Nu este nimic de instalat și nimic de semnat. Ieșirea este o singură valoare CSS — lipește-o și ai gata.
FAQ Editor Cubic-Bezier
Ce este o curbă de easing cubic-bezier?
Este o curbă matematică definită de două puncte de control care determină cum o tranziție CSS sau animație accelerează în timp. Cele patru numere din cubic-bezier(x1 y1 x2 y2) setează pozițiile acelor puncte de control.
De ce valorile Y pot merge deasupra 1 sau sub 0?
Valorile Y în afara 0–1 produc overshoot și undershoot — curba merge dincolo de endpoint înainte de a se stabili. Aceasta creează curbe de easing 'bouncy'. Valorile X trebuie să rămână în 0–1.
Cum folosesc ieșirea?
Copiază șirul cubic-bezier(...) și lipește-l în orice valoare CSS transition-timing-function sau animation-timing-function. Funcționează în fiecare browser modern.
Ce înseamnă ease-in-out de fapt?
Ease-in-out începe lent accelerează în mijloc și încetinește la final — cubic-bezier(0.42 0 0.58 1). Se oglindește cum obiectele reale accelerează și încetinesc și este alegerea implicită pentru majoritatea mișcării UI cizelate.
Este previzualizarea animației mingii exactă cu CSS?
Da — previzualizarea folosește aceeași formulă cubic bezier pe care browserele o aplică tranzițiilor CSS. Glisierul de durată te lasă să simți curbele lente versus rapide înainte de a te angaja.