⭐ 0
🔍
Besedilo Slika PDF in dokumenti Avdio Glasba elektronika Čas Pripomočki Validatorji Ezoterika igre

Generator krivulj Cubic Bezier

Oblikujte časovno funkcijo CSS cubic-bezier() po meri tako, da povlečete dve kontrolni točki, jo v živo primerjate z linearno referenco in nato kopirate pripravljeno vrednost.

🔒 V celoti obdelano v vašem brskalniku – nič, kar tukaj vnesete, ni nikoli naloženo.

Povlecite oranžni ročaj (P1) in rdeči ročaj (P2), da preoblikujete krivuljo — delujejo tudi smerne tipke. X ostane zamejen med 0 in 1, kot zahteva CSS; povlecite ročaj nad ali pod okvir, da y preseže to območje za učinke prenihaja in odboja.

Vaša krivulja

Linearno (za primerjavo)

Obdelava ... 0%

Rezultat

Ročno vnašanje cubic-bezier(x1, y1, x2, y2) in osveževanje strani za preverjanje občutka je počasen način za prilagajanje animacije. Ta generator to zanko skrajša: povlecite kateri koli ročaj kontrolne točke na krivulji ali vnesite natančne številke v polja x1/y1/x2/y2 in krivulja, kopirljiv niz CSS ter živi predogled animacije se bodo posodobili ob vsaki spremembi — brez gradnje, brez osveževanja.

Obe osi delujeta namenoma različno. x1 in x2 ostaneta zamejeni med 0 in 1, ker to specifikacija CSS dejansko zahteva od časovne funkcije cubic-bezier() — vrednost zunaj tega območja je preprosto neveljavna. y1 in y2 pa te omejitve nimata: povlecite ročaj nad vrh okvirja ali pod dno in krivulja bo prekoračila svoj začetek ali konec, kar je točno način, kako se iz ene same krivulje easinga zgradijo učinki vzmeti in odboja.

Videti številko ni isto kot videti gibanje, zato predogled v zanki prikazuje dve enaki kroglici drugo ob drugi: ena se premika z vašo krivuljo po meri, druga pa z navadno linearno hitrostjo. Opazovanje njunega gibanja je najhitrejši način, da ugotovite, ali krivulja easinga res ustvarja želeni občutek, še preden pride v slogovno datoteko. Strani s prednastavitvami — dejanske številke za ključno besedo ease-in-out v CSS, iskren približek prenihaja, ki mu nekateri pravijo odboj, in Googlova objavljena standardna krivulja Material Design — so pripravljena izhodišča, iz katerih lahko začnete prilagajati, namesto da bi začeli s praznima kontrolnima točkama.

Vse se izvaja lokalno v vašem brskalniku: brez nalaganja, brez računa, brez povratne poti do strežnika in generator deluje brez povezave, ko se stran enkrat naloži.

Uživate v tem orodju? Se vam zdi izdelek uporaben? Vidite v njem potencial in ga želite podpreti?

🛡️
Izvaja se v brskalniku

Vaše datoteke in vnosi nikoli ne zapustijo te naprave. Obdelava poteka povsem brez povezave. 100-odstotno varno.

Sprejeti formati in pravila

  • Povlecljiv urejevalnik krivulj SVG z dvema ročajema (P1 in P2) in vnosnimi polji za številke x1/y1/x2/y2 za natančne vrednosti do slikovne pike.
  • Predogled animacije v zanki, ki primerja vašo časovno krivuljo cubic-bezier() po meri z linearno referenčno kroglico, tako da lahko easing vidite, ne le preberete.
  • Kopirljiv niz cubic-bezier(x1, y1, x2, y2), pripravljen za transition-timing-function ali animation-timing-function, ter strani s prednastavitvami za ease-in-out, bounce in standardno krivuljo Material Design.

Ključne prednosti

✓ Povlecite kateri koli ročaj kontrolne točke in opazujte, kako se krivulja, živi predogled animacije in kopirljiv niz CSS posodabljajo skupaj — ni vam treba zapomniti si koordinatne matematike.
✓ Y lahko preseže 0 in 1 za učinke vzmeti in odboja, medtem ko X ostane zamejen na območje 0–1, ki ga CSS dejansko zahteva, tako da je vsaka kopirana vrednost veljavna v trenutku, ko jo prilepite.
✓ Vzporedni predogled primerja vašo krivuljo po meri z navadno linearno referenco, tako da je razlika v občutku gibanja — kar je celoten razlog za uporabo easinga — očitna na prvi pogled in ne le v izpisu kode.

Primeri uporabe

  • • Potrebujete vrednost po meri za CSS lastnosti transition-timing-function ali animation-timing-function, namesto da bi uporabili vgrajene ključne besede, kot je ease?
  • • Želite natančno videti, kako je videti krivulja cubic-bezier(0.42, 0, 0.58, 1) – dejanske številke za CSS-ovo ključno besedo ease-in-out – v gibanju, preden jo uporabite?
  • • Gradite animacijo odbojnega gumba, modalnega okna ali kartice in potrebujete pripravljeno krivuljo pospeševanja s presežkom, ki jo lahko kopirate neposredno v svoj slogovni list?