Uređivač cubic-bezier krivih

Kako se koristi uređivač cubic-bezier krivih

1. Prevuci dve ručice na grafikonu. P1 (prva kontrolna tačka) oblikuje početak kretanja, a P2 kraj. Vreme ide sleva udesno, a napredak odozdo nagore.
2. Ili upiši vrednost u polje Vrednost cubic-bezier(): pun zapis cubic-bezier(0.4, 0, 0.2, 1), četiri broja ili ključnu reč poput ease-in-out. Polja x1, y1, x2 i y2 menjaju po jednu koordinatu.
3. Počni iz menija Gotove krive (CSS ključne reči, porodice od sine do back i Material Design krive) ili dugmadima s ključnim rečima. Kad se tvoja kriva poklapa sa nekom gotovom, njen naziv se prikazuje pored dugmadi.
4. Gledaj Pregled animacije: tačka na Tvoja kriva i tačka na linear prelaze isto rastojanje za isto Trajanje. Koristi Pauziraj/Pokreni i Ponovo da ih uporediš.
5. Kopiraj rezultat iz odeljka CSS funkcija vremena ili kopiraj Aproksimacija linear() i izaberi broj Segmenti.

Tastatura: fokusiraj ručicu i strelicama je pomeraj za 0,01, a uz Shift za 0,1.

Ako je tvoj sistem podešen da smanji kretanje, animacija počinje pauzirana. Pritisni Pokreni ako želiš da je ipak pokreneš.

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

Šta znači cubic-bezier()

CSS funkcija ublažavanja (easing) preslikava proteklo vreme prelaza (0 do 1) u njegov napredak (0 do 1). cubic-bezier(x1, y1, x2, y2) opisuje to preslikavanje kubnom Bezijeovom krivom koja počinje u (0, 0), završava u (1, 1) i povlače je dve kontrolne tačke, P1 = (x1, y1) i P2 = (x2, y2).

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

CSS ključne reč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 vrednosti napretka u ravnomerno raspoređenim trenucima, na primer linear(0, 0.25, 0.5, 0.75, 1), i spaja ih pravim linijama. Alat uzorkuje tvoju krivu (rešava Bezijeovu krivu za svaki vremenski korak) i ispisuje te vrednosti sa tri decimale. Sa 20 do 40 segmenata rezultat je vizuelno identičan krivoj. Prava korist od linear() je kod krivih koje Bezijeova kriva ne može da nacrta, kao što su odskoci i opruge, ali omogućava i da deliš jednu sintaksu. Radi u Chrome-u i Edge-u 113+, Firefox-u 112+ i Safariju 17.2+, zato zadrži vrednost cubic-bezier() kao rezervu.