Utilia
Kategorije ▾
Jezik: hr ▾

Uređivač cubic-beziera

Oblikuj CSS krivulje ublažavanja povlačenjem ručki, usporedi ih s linearnom u animaciji uživo i kopiraj cubic-bezier() ili verziju s funkcijom linear().

Povuci dvije ručke (P1 i P2). Vrijeme teče slijeva udesno, napredak odozdo prema gore; ručke smiju ići iznad 1 ili ispod 0 za učinak odskoka. Kad je ručka u fokusu, koristi tipke sa strelicama (Shift za 0,1).

Kontrolne točke

Pregled animacije

Tvoja krivulja
linear

Ista krivulja uzorkovana kao CSS linear() ublažavanje (Chrome 113+, Firefox 112+, Safari 17.2+). Više točaka preciznije prati krivulju.

Kako koristiti uređivač cubic-beziera

  1. Povuci dvije ručke na grafu. P1 (prva kontrolna točka) oblikuje početak kretanja, a P2 kraj. Vrijeme teče slijeva udesno, a napredak odozdo prema gore.
  2. Ili upiši vrijednost u Vrijednost cubic-bezier(): cijeli cubic-bezier(0.4, 0, 0.2, 1), četiri broja ili ključnu riječ poput ease-in-out. Polja x1, y1, x2 i y2 uređuju po jednu koordinatu.
  3. Kreni iz izbornika Predlošci (CSS ključne riječi, obitelji od sine do back te krivulje Material Designa) ili s gumba s ključnim riječima. Kad se tvoja krivulja podudara s predloškom, njegov se naziv prikazuje pokraj gumba.
  4. Prati Pregled animacije: točka na Tvoja krivulja i točka na linear prelaze istu udaljenost u istom Trajanju. Pomoću Pauziraj/Pokreni i Ponovno pokreni usporedi ih.
  5. Kopiraj rezultat iz CSS funkcija vremena ili kopiraj Aproksimaciju linear() i odaberi broj Segmenata.

Tipkovnica: fokusiraj ručku i tipkama sa strelicama pomiči je za 0,01, a uz Shift za 0,1.

Ako je tvoj sustav postavljen na smanjeno kretanje, animacija počinje pauzirana. Pritisni Pokreni ako je ipak želiš pokrenuti.

Alat radi u tvom pregledniku. Ništa što upišeš ne šalje se na poslužitelj.

Što znači cubic-bezier()

CSS funkcija ublažavanja preslikava proteklo vrijeme prijelaza (0 do 1) u njegov napredak (0 do 1). cubic-bezier(x1, y1, x2, y2) opisuje to preslikavanje kubnom Bézierovom krivuljom koja počinje u (0, 0), završava u (1, 1), a povlače je dvije kontrolne točke, P1 = (x1, y1) i P2 = (x2, y2).

  • Vrijednosti x su vremena i moraju ostati između 0 i 1, inače funkcija ne bi bila valjana krivulja vremena. Uređivač ih drži u rasponu.
  • Vrijednosti y su napredak i mogu ići ispod 0 ili iznad 1. Y iznad 1 čini da animacija prekorači cilj i vrati se, kao krivulje Back; ispod 0 najprije ide unatrag.
  • Strmi nagib znači brzo kretanje, plosnat sporo. ease-out počinje brzo i završava sporo, što djeluje prirodno za elemente koji ulaze na zaslon. ease-in radi suprotno i pristaje elementima koji odlaze.

CSS ključne riječi su prečaci: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) i linear = (0, 0, 1, 1).

Aproksimacija linear()

Novija funkcija linear() navodi vrijednosti napretka u jednako razmaknutim trenucima, na primjer linear(0, 0.25, 0.5, 0.75, 1), i spaja ih ravnim crtama. Alat uzorkuje tvoju krivulju (rješava Bézier za svaki vremenski korak) i zapisuje te vrijednosti s tri decimale. Uz 20 do 40 segmenata rezultat je vizualno identičan krivulji. Prava korist od linear() je kod krivulja koje Bézier ne može nacrtati, poput odskoka i opruga, ali omogućuje i dijeljenje jedne sintakse. Radi u Chromeu i Edgeu 113+, Firefoxu 112+ i Safariju 17.2+, zato vrijednost cubic-bezier() zadrži kao zamjenu.

Česta pitanja

Gdje koristiti vrijednost?

U transition-timing-function, animation-timing-function ili u skraćenom zapisu: transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);. Web Animations API prihvaća je kao easing.

Koja su dobra trajanja?

Male promjene sučelja obično traju 150 do 300 ms, a veliki pomaci preko zaslona 300 do 500 ms. Dulje animacije brzo djeluju sporo.

Zašto ne mogu povući ručku preko lijevog ili desnog ruba?

Zato što je x vrijeme, a vrijeme ne može ići unatrag: CSS odbija vrijednosti x izvan raspona 0–1.

Koje krivulje koristi Material Design?

Klasična standardna krivulja je cubic-bezier(0.4, 0, 0.2, 1), uz varijante za usporavanje, ubrzavanje i oštre prijelaze. Material 3 dodaje naglašene krivulje; sve su u izborniku Predlošci.

Kako postupiti sa smanjenim kretanjem?

Poštuj @media (prefers-reduced-motion: reduce) u svom CSS-u: skrati ili ukloni velike pomake i zadrži jednostavna pretapanja.

Slični alati