Generator za CSS Cubic Bezier

Povlecite ročici, da oblikujete krivuljo prehoda, opazujte gibanje pike v primerjavi z enakomernim in kopirajte vrednost cubic-bezier().

Prednastavitve
Kontrolne točke
Prva kontrolna točka
Druga kontrolna točka
Predogled
vaša krivulja
linear
Vrednost
cubic-bezier(0.25, 0.1, 0.25, 1)
Povlecite ročico ali izberite prednastavitev, da oblikujete krivuljo.

Krivulja se izriše neposredno v vašem brskalniku. Nič od tega, kar nastavite tukaj, se ne prenaša na BroBroGo.

Pogosta vprašanja

Kaj pomenita dve ročici in štiri številke?

Krivulja poteka od spodaj levo (začetek) do zgoraj desno (konec), pri čemer čas teče od leve proti desni, napredek pa gre navzgor. Ročici sta kontrolni točki, ki jo upogibata — vsaka ima koordinati X in Y, tako da skupaj tvorita cubic-bezier(x1, y1, x2, y2). X ostaja med 0 in 1, medtem ko lahko Y preseže vrh ali dno, da ustvari prekoračitev gibanja ali umik, preden se umiri.

Kako uporabim to vrednost v svojem CSS?

Kopirajte cubic-bezier() in ga vstavite povsod, kjer se uporablja časovna funkcija — transition-timing-function, animation-timing-function ali v skrajšani obliki, npr. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Ključne besede ease, ease-in, ease-out in ease-in-out so le fiksne krivulje cubic-bezier, zato vam izbira ene od teh prednastavitev prikaže natančno vrednost za to ključno besedo.

Ali lahko ustvari učinek odboja ali elastičnosti?

Samo po sebi ne. Ena krivulja cubic-bezier lahko ustvari učinek pričakovanja in prekoračitve — prednastavitve "back" potegnejo eno ročico čez polje, da dosežejo prav to — vendar se lahko premakne le v eno smer in se nato umiri. Učinka odboja (bounce) ali elastičnosti večkrat spremenita smer, česar ena sama krivulja cubic-bezier ne more izraziti; za to potrebujete CSS ključne sličice (keyframes) ali funkcijo linear() z več točkami.

Napisala in pregledala uredniška ekipa BroBroGo.Zadnja posodobitev:

Delovanje in namen orodja

Generator za CSS Cubic Bezier je vizualni pripomoček, namenjen oblikovanju po meri prilagojenih krivulj prehodov za spletne animacije in prehode. Orodje omogoča neposredno vlečenje dveh kontrolnih ročic, s čimer spreminjate obliko krivulje prehoda. Med prilagajanjem krivulje se pika premika vzdolž nje, kar vizualno prikazuje učinek prehoda neposredno ob piki, ki se premika z enakomerno (linearno) hitrostjo. Ko oblikujete želeno krivuljo, orodje izpiše ustrezno vrednost cubic-bezier(), ki jo lahko kopirate in uporabite v svoji kodi CSS.

Orodje je namenjeno vsem, ki želijo ustvariti lastne učinke prehodov za CSS prehode ali animacije. Prav tako pomaga razumeti natančne vrednosti cubic-bezier(), ki stojijo za standardnimi ključnimi besedami časovnih funkcij v CSS, kot so ease, ease-in, ease-out in ease-in-out. Uporabno je tudi za razvijalce, ki želijo implementirati animacije z učinki umika ali prekoračitve končnega stanja.

Vhodni parametri in upravljanje

Oblikovanje krivulje določajo naslednji vhodni parametri in načini upravljanja:

  • Vlečenje dveh ročic: Ročici neposredno določata končno obliko krivulje prehoda.
  • Prva kontrolna točka X: Številčna vrednost, omejena med 0 in 1.
  • Prva kontrolna točka Y: Številčna vrednost, omejena med -0.70 in 1.70.
  • Druga kontrolna točka X: Številčna vrednost, omejena med 0 in 1.
  • Druga kontrolna točka Y: Številčna vrednost, omejena med -0.70 in 1.70.
  • Izbira prednastavitev: Izbirate lahko med možnostmi, kot so "ease", "ease-in", "ease-out", "ease-in-out", "Nazaj noter (Back In)", "Nazaj ven (Back Out)" ali "Nazaj noter-ven (Back In-Out)".

Upravljanje vmesnika vključuje natančna pravila za vnos podatkov. Če v polje za vnos "Prva kontrolna točka X" vnesete vrednost, kot je 9, in nato odstranite fokus s polja, se vrednost samodejno popravi na 1. Če številsko polje popolnoma izpraznite in odstranite fokus, sistem povrne zadnjo veljavno vrednost. Prazni ali neštevilski vnosi začasno počakajo na dokončen vnos celotne vrednosti. Za natančno prilagajanje lahko uporabite tudi tipkovnico: s pritiskom na smerno tipko levo, ko je izbrana ročica kontrolne točke v fokusu, se njena vrednost spremeni, na primer na 0.99.

Izhodni podatki in vizualizacija

Orodje v realnem času prikazuje naslednje rezultate:

  • vaša krivulja: Grafični prikaz trenutno oblikovane krivulje prehoda.
  • cubic-bezier(x1, y1, x2, y2): Generirana vrednost funkcije CSS cubic-bezier(), ki ustreza izrisani krivulji.
  • Copied: Statusno sporočilo, ki se izpiše ob uspešnem kopiranju vrednosti cubic-bezier() v odložišče. Postopek kopiranja ima le stanje uspeha in ne prikazuje opozoril o napakah.

Matematična pravila in omejitve krivulje

Krivulja prehoda poteka od spodnjega levega kota (začetek animacije) do zgornjega desnega kota (konec animacije). Vodoravna os predstavlja čas, ki napreduje od leve proti desni, medtem ko navpična os predstavlja napredek animacije, ki se premika navzgor.

Vrednosti X za obe kontrolni točki morata vedno ostati strogo v intervalu med 0 in 1. Vrednosti Y pa lahko presežejo zgornjo mejo ali se spustijo pod spodnjo mejo (v razponu od -0.70 do 1.70), kar omogoča ustvarjanje učinkov prekoračitve (overshoot) ali umika (pull-back). Prednastavitev "Nazaj ven (Back Out)" na primer nastavi vrednost cubic-bezier() na natančno cubic-bezier(0.34, 1.56, 0.64, 1).

Ena sama krivulja cubic-bezier ima fizikalne omejitve. Čeprav lahko ustvari učinek pričakovanja in prekoračitve, se lahko premakne le v eno smer in se nato umiri. Z njo ni mogoče izraziti kompleksnejših učinkov, ki večkrat zaporedoma spremenijo smer, kot sta odboj (bounce) ali elastičnost.

Zasebnost in obdelava podatkov

Krivulja se izriše neposredno v vašem brskalniku. Nič od tega, kar nastavite v orodju, se ne prenaša na BroBroGo.

Pogosta vprašanja

Kaj pomenita dve ročici in štiri številke?

Krivulja poteka od spodaj levo (začetek) do zgoraj desno (konec), pri čemer čas teče od leve proti desni, napredek pa gre navzgor. Ročici sta kontrolni točki, ki jo upogibata — vsaka ima koordinati X in Y, tako da skupaj tvorita cubic-bezier(x1, y1, x2, y2). X ostaja med 0 in 1, medtem ko lahko Y preseže vrh ali dno, da ustvari prekoračitev gibanja ali umik, preden se umiri.

Kako uporabim to vrednost v svojem CSS?

Kopirajte cubic-bezier() in ga vstavite povsod, kjer se uporablja časovna funkcija — transition-timing-function, animation-timing-function ali v skrajšani obliki, npr. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Ključne besede ease, ease-in, ease-out in ease-in-out so le fiksne krivulje cubic-bezier, zato vam izbira ene od teh prednastavitev prikaže natančno vrednost za to ključno besedo.

Ali lahko ustvari učinek odboja ali elastičnosti?

Samo po sebi ne. Ena krivulja cubic-bezier lahko ustvari učinek pričakovanja in prekoračitve — prednastavitve "back" potegnejo eno ročico čez polje, da dosežejo prav to — vendar se lahko premakne le v eno smer in se nato umiri. Učinka odboja (bounce) ali elastičnosti večkrat spremenita smer, česar ena sama krivulja cubic-bezier ne more izraziti; za to potrebujete CSS ključne sličice (keyframes) ali funkcijo linear() z več točkami.

Generator prelivovUstvarite linearen, radialen ali stožčast preliv, dodajte barvne točke, določite smer in kopirajte CSS z enim klikom.Generator za border-radiusZaoblite vsak kot z drsniki, oblikujte organske mehurčke z eliptičnim načinom in takoj kopirajte CSS.Generator za FlexboxNastavite flex vsebnik in njegove elemente z vizualnimi kontrolami, opazujte odziv postavitve v živo in kopirajte CSS z enim klikom.Generator za CSS GridDoločite stolpce in vrstice, povlecite čez celice za postavitev elementov ter z enim klikom kopirajte CSS mreže z ustreznim HTML-jem.Generator za box-shadowPovlecite drsnike, da oblikujete senco elementa, zložite plasti za večjo globino in takoj kopirajte končni CSS.Kalkulator za CSS clamp()Vnesite velikost za male in velike zaslone ter pridobite tekočo vrednost clamp(), ki se vmes gladko prilagaja — za velikosti pisav, paddinge, margine ali gape.