Utilia
Kategorije ▾
Jezik: bs ▾

Uređivač cubic-bezier

Dizajniraj CSS easing krivulje uređivačem cubic-bezier s ručkama za povlačenje, uporedi ih s linearnom u animaciji uživo i kopiraj cubic-bezier() ili linear().

Prevuci dvije ručke (P1 i P2). Vrijeme teče slijeva nadesno, napredak odozdo nagore; ručke mogu ići iznad 1 ili ispod 0 za odskok. Kad je ručka u fokusu, koristi tipke sa strelicama (Shift za 0,1).

Kontrolne tačke

Pregled animacije

Tvoja krivulja
linear

Ista krivulja uzorkovana kao CSS linear() easing (Chrome 113+, Firefox 112+, Safari 17.2+). Više tačaka tačnije prati krivulju.

Kako koristiti uređivač cubic-bezier

  1. Prevuci dvije ručke na grafikonu. P1 (prva kontrolna tačka) oblikuje početak kretanja, a P2 kraj. Vrijeme teče slijeva nadesno, a napredak odozdo nagore.
  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. Počni iz menija Predlošci (CSS ključne riječi, porodice od sine do back i Material Design krivulje) ili dugmadi s ključnim riječima. Kad se tvoja krivulja poklapa s predloškom, njegov naziv se prikazuje pored dugmadi.
  4. Gledaj Pregled animacije: tačka na Tvoja krivulja i tačka na linear prelaze istu udaljenost u istom Trajanje. Koristi Pauza/Pokreni i Ponovo da ih uporediš.
  5. Kopiraj rezultat iz CSS funkcija vremena ili kopiraj Aproksimacija linear() i odaberi broj Segmenti.

Tastatura: fokusiraj ručku i koristi tipke sa strelicama da je pomjeriš za 0,01, a uz Shift za 0,1.

Ako je tvoj sistem podešen na smanjeno kretanje, animacija počinje pauzirana. Pritisni Pokreni ako je želiš svejedno pokrenuti.

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

Šta znači cubic-bezier()

CSS easing funkcija 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 tačke, P1 = (x1, y1) i P2 = (x2, y2).

  • x vrijednosti su vrijeme i moraju ostati između 0 i 1, inače funkcija ne bi bila ispravna krivulja vremena. Uređivač ih drži u opsegu.
  • y vrijednosti su napredak i mogu ići ispod 0 ili iznad 1. Y iznad 1 tjera animaciju da prekorači cilj pa se vrati, kao kod Back krivulja; ispod 0 prvo ide unazad.
  • Strm nagib znači brzo kretanje, a ravan sporo. ease-out počinje brzo i završava sporo, što je prirodno za elemente koji ulaze na ekran. ease-in radi suprotno i odgovara elementima koji izlaze.

CSS ključne riječi su prečice: 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 ravnomjerno raspoređenim trenucima, na primjer linear(0, 0.25, 0.5, 0.75, 1), i spaja ih pravim linijama. Alat uzorkuje tvoju krivulju (rješava Bézierovu krivulju za svaki vremenski korak) i te vrijednosti zapisuje s tri decimale. S 20 do 40 segmenata rezultat je vizuelno identičan krivulji. Prava korist od linear() je za krivulje koje Bézier ne može nacrtati, poput odskoka i opruge, ali omogućava i dijeljenje jedne sintakse. Radi u Chromeu i Edgeu 113+, Firefoxu 112+ i Safariju 17.2+, zato zadrži vrijednost cubic-bezier() kao rezervu.

Česta pitanja

Gdje koristim vrijednost?

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

Koja trajanja su dobra?

Male promjene sučelja obično traju 150 do 300 ms, a veliko kretanje preko ekrana 300 do 500 ms. Duže animacije brzo djeluju sporo.

Zašto ne mogu povući ručku preko lijeve ili desne ivice?

Zato što je x vrijeme, a vrijeme ne može teći unazad: CSS odbacuje x vrijednosti izvan 0–1.

Koje krivulje koristi Material Design?

Klasična standardna krivulja je cubic-bezier(0.4, 0, 0.2, 1), s varijantama za usporavanje, ubrzavanje i oštro kretanje. Material 3 dodaje naglašene krivulje; sve su u meniju Predlošci.

Kako postupati sa smanjenim kretanjem?

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

Srodni alati