CSS Cubic Bezier Generator

Kako radi CSS Cubic Bezier Generator

CSS Cubic Bezier Generator je vizuelni alat koji vam omogućava da kreirate CSS krivu ubrzanja povlačenjem dvije kontrolne tačke. Dok prilagođavate krivu, tačka se kreće duž nje kako bi demonstrirala efekat ubrzanja, a pored nje se nalazi druga tačka koja se kreće ravnomjernim tempom radi lakšeg poređenja. Nakon što oblikujete željenu krivu, alat generiše odgovarajuću cubic-bezier() vrijednost koju možete kopirati i direktno iskoristiti u svom CSS-u.

Ovaj alat je namijenjen svima koji žele kreirati prilagođene efekte ubrzanja za CSS prelaze (transitions) ili animacije. Također je koristan za razumijevanje tačnih cubic-bezier() vrijednosti koje stoje iza uobičajenih ključnih riječi za vremenske funkcije kao što su ease, ease-in, ease-out i ease-in-out. Na kraju, alat pomaže svima koji žele implementirati animaciju koja iščekuje ili prebacuje svoje konačno stanje.

Ulazni parametri i kontrola krive

Oblikovanje krive ubrzanja vrši se putem sljedećih ulaznih parametara i kontrola:

• Povlačenje dvije ručice: Ove ručice direktno kontrolišu oblik krive ubrzanja.
• Prva kontrolna tačka X: Brojčana vrijednost koja mora biti između 0 i 1.
• Prva kontrolna tačka Y: Brojčana vrijednost u rasponu od -0.70 do 1.70.
• Druga kontrolna tačka X: Brojčana vrijednost koja mora biti između 0 i 1.
• Druga kontrolna tačka Y: Brojčana vrijednost u rasponu od -0.70 do 1.70.
• Odabir predložaka: Možete izabrati predefinisane opcije kao što su "ease", "ease-in", "ease-out", "ease-in-out", "Povlačenje na početku (Back In)", "Prebacivanje na kraju (Back Out)" ili "Povlačenje na početku i kraju (Back In-Out)".

Izlazni rezultati alata

Kao rezultat vašeg rada sa kontrolnim tačkama, generator prikazuje sljedeće elemente:

• Vaša kriva: Vizuelni prikaz krive ubrzanja koju trenutno oblikujete.
• cubic-bezier(x1, y1, x2, y2): CSS cubic-bezier() vrijednost funkcije koja tačno odgovara obliku krive koju ste kreirali.
• Copied: Statusna poruka koja se prikazuje nakon što uspješno kopirate generisanu cubic-bezier() vrijednost.

Pravila ponašanja i granični slučajevi

Prilikom rada sa generatorom primjenjuju se specifična pravila i ograničenja:

• Kriva se proteže od donjeg lijevog ugla (koji predstavlja početak) do gornjeg desnog ugla (koji predstavlja kraj).
• Vrijeme napreduje s lijeva na desno, dok se napredak animacije kreće prema gore.
• Vrijednosti za X koordinate kontrolnih tačaka moraju ostati striktno između 0 i 1.
• Vrijednosti za Y koordinate kontrolnih tačaka mogu ići iznad vrha (iznad 1) ili ispod dna (ispod 0) kako bi se stvorili efekti prebacivanja (overshoot) ili povlačenja unazad (pull-back).
• Unos vrijednosti za X je ograničen na raspon 0–1, dok je unos za Y ograničen na -0.70–1.70.
• Ako unesete vrijednost van dozvoljenog opsega, na primjer 9 za "Prva kontrolna tačka X", i zatim uklonite fokus sa tog polja, vrijednost će se automatski ispraviti na 1.
• Ako potpuno obrišete brojčano polje i izgubite fokus, alat će vratiti prethodnu važeću vrijednost.
• Pritisak na tipku sa strelicom lijevo dok je fokusirana ručica kontrolne tačke promijenit će njenu vrijednost, na primjer, na 0.99.
• Predložak "Prebacivanje na kraju (Back Out)" postavlja cubic-bezier() vrijednost na tačno cubic-bezier(0.34, 1.56, 0.64, 1).
• Prazni ili nebrojčani unosi u poljima privremeno će čekati unos kompletne i ispravne vrijednosti.
• Kopiranje vrijednosti prikazuje isključivo poruku o uspjehu, bez ikakvih posebnih obavještenja o odbijanju ili grešci.
• Jedna cubic-bezier kriva može kreirati efekte iščekivanja i prebacivanja, ali se može kretati samo u jednom smjeru i potom smiriti; ona ne može izraziti efekte koji više puta mijenjaju smjer, kao što su odskakanje (bounce) ili elastičnost.

Privatnost i obrada podataka

Kriva se iscrtava direktno u Vašem pregledniku. Ništa što ovdje postavite ne šalje se na BroBroGo.

Često postavljana pitanja (FAQ)

Šta znače dvije ručice i četiri broja?

Kriva se proteže od donjeg lijevog ugla (početak) do gornjeg desnog ugla (kraj), pri čemu vrijeme teče s lijeva na desno, a napredak ide prema gore. Dvije ručice su kontrolne tačke koje je savijaju — svaka ima X i Y koordinatu, pa zajedno čine cubic-bezier(x1, y1, x2, y2). X uvijek ostaje između 0 i 1, dok Y može ići iznad vrha ili ispod dna kako bi se stvorio efekat prebacivanja ili povlačenja unazad prije nego što se kretanje smiri.

Kako da koristim ovu vrijednost u svom CSS-u?

Kopirajte cubic-bezier() i umetnite ga tamo gdje ide funkcija vremenskog rasporeda (timing function) — transition-timing-function, animation-timing-function ili skraćeni oblik, npr. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Ključne riječi ease, ease-in, ease-out i ease-in-out su samo fiksne cubic-bezier krive, tako da odabir nekog od tih predložaka prikazuje tačnu vrijednost iza te ključne riječi.

Može li se napraviti efekat odskakanja ili elastičnosti?

Ne samostalno. Jedan cubic-bezier može napraviti efekat iščekivanja i prebacivanja — predlošci "back" povlače jednu ručicu izvan okvira upravo da bi to postigli — ali se može kretati samo u jednom smjeru i zatim smiriti. Efekti odskakanja (bounce) i elastičnosti mijenjaju smjer nekoliko puta, što se ne može izraziti jednom cubic-bezier krivom; za to su vam potrebni CSS keyframes ili funkcija linear() sa mnogo tačaka.