Urejevalnik cubic-bezier

Kako uporabljati urejevalnik cubic-bezier

1. Povleci oba ročaja na grafu. P1 (prva kontrolna točka) oblikuje začetek gibanja, P2 konec. Čas teče od leve proti desni, napredek od spodaj navzgor.
2. Ali pa vpiši vrednost v polje Vrednost cubic-bezier(): celoten cubic-bezier(0.4, 0, 0.2, 1), štiri števila ali ključno besedo, kot je ease-in-out. Polja x1, y1, x2 in y2 urejajo po eno koordinato naenkrat.
3. Začni z menijem Predloge (ključne besede CSS, družine od sine do back in krivulje Material Design) ali z gumbi za ključne besede. Ko se tvoja krivulja ujema s predlogo, je njeno ime prikazano ob gumbih.
4. Spremljaj Predogled animacije: pika na Tvoja krivulja in pika na linear prepotujeta enako razdaljo v enakem Trajanje. Z Premor/Predvajaj in Znova ju primerjaš.
5. Rezultat kopiraš iz polja Časovna funkcija CSS ali pa kopiraš Približek linear() in izbereš število Odseki.

Tipkovnica: izberi ročaj in ga s smernimi tipkami premakneš za 0,01, s Shiftom pa za 0,1.

Če je tvoj sistem nastavljen na zmanjšano gibanje, se animacija začne zaustavljena. Pritisni Predvajaj, če jo želiš vseeno zagnati.

Orodje deluje v tvojem brskalniku. Nič, kar vneseš, se ne pošlje na strežnik.

Kaj pomeni cubic-bezier()

Funkcija pospeševanja CSS preslika pretekli čas prehoda (od 0 do 1) v njegov napredek (od 0 do 1). cubic-bezier(x1, y1, x2, y2) to preslikavo opiše s kubično Bézierjevo krivuljo, ki se začne v (0, 0), konča v (1, 1) in jo vlečeta dve kontrolni točki, P1 = (x1, y1) in P2 = (x2, y2).

• Vrednosti x so časi in morajo ostati med 0 in 1, sicer funkcija ne bi bila veljavna časovna krivulja. Urejevalnik jih drži v tem območju.
• Vrednosti y so napredek in so lahko pod 0 ali nad 1. Vrednost y nad 1 povzroči, da animacija preseže cilj in se vrne, kot pri krivuljah Back; pod 0 se najprej premakne nazaj.
• Strm naklon pomeni hitro gibanje, položen počasno. ease-out se začne hitro in konča počasi, kar je naravno za elemente, ki vstopajo na zaslon. ease-in počne nasprotno in ustreza elementom, ki odhajajo.

Ključne besede CSS so bližnjice: 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) in linear = (0, 0, 1, 1).

Približek linear()

Novejša funkcija linear() našteje vrednosti napredka v enakomerno razporejenih časih, na primer linear(0, 0.25, 0.5, 0.75, 1), in jih poveže z ravnimi črtami. Orodje tvojo krivuljo vzorči (za vsak časovni korak reši Bézierjevo krivuljo) in te vrednosti zapiše na tri decimalke. Z 20 do 40 odseki je rezultat vizualno enak krivulji. Prava prednost funkcije linear() je pri krivuljah, ki jih Bézier ne more narisati, kot so odboji in vzmeti, omogoča pa tudi skupno sintakso. Deluje v Chromu in Edgeu 113+, Firefoxu 112+ in Safariju 17.2+, zato vrednost cubic-bezier() obdrži kot rezervo.