Editor cubic-bezier

Ako používať editor cubic-bezier

1. Presúvaj dva úchyty na grafe. P1 (prvý riadiaci bod) tvaruje začiatok pohybu, P2 jeho koniec. Čas ide zľava doprava a pokrok zdola nahor.
2. Alebo zadaj hodnotu do poľa Hodnota cubic-bezier(): celé cubic-bezier(0.4, 0, 0.2, 1), štyri čísla alebo kľúčové slovo ako ease-in-out. Polia x1, y1, x2 a y2 upravujú vždy jednu súradnicu.
3. Začni z ponuky Predvoľby (kľúčové slová CSS, rodiny od sine po back a krivky Material Design) alebo z tlačidiel s kľúčovými slovami. Keď tvoja krivka zodpovedá predvoľbe, jej názov sa zobrazí vedľa tlačidiel.
4. Sleduj Náhľad animácie: bod na Tvoja krivka a bod na linear prejdú rovnakú vzdialenosť v rovnakom Trvaní. Pomocou Pozastaviť/Prehrať a Reštartovať ich porovnáš.
5. Výsledok skopíruj z Funkcie časovania CSS alebo skopíruj Aproximáciu linear() a vyber počet Segmentov.

Klávesnica: aktivuj úchyt a šípkami ho posúvaj o 0,01, alebo so Shiftom o 0,1.

Ak je tvoj systém nastavený na obmedzenie pohybu, animácia sa spustí pozastavená. Ak ju chceš napriek tomu spustiť, stlač Prehrať.

Nástroj funguje v tvojom prehliadači. Nič, čo zadáš, sa neodosiela na server.

Čo znamená cubic-bezier()

Easing funkcia CSS priraďuje uplynutému času prechodu (0 až 1) jeho pokrok (0 až 1). cubic-bezier(x1, y1, x2, y2) toto priradenie opisuje kubickou Bézierovou krivkou, ktorá začína v (0, 0), končí v (1, 1) a je ťahaná dvoma riadiacimi bodmi, P1 = (x1, y1) a P2 = (x2, y2).

• Hodnoty x sú časy a musia zostať medzi 0 a 1, inak by funkcia nebola platnou krivkou časovania. Editor ich drží v rozsahu.
• Hodnoty y sú pokrok a môžu ísť pod 0 alebo nad 1. Y nad 1 spôsobí, že animácia prestrelí cieľ a vráti sa, ako pri krivkách Back; pod 0 sa najprv pohne dozadu.
• Strmý sklon znamená rýchly pohyb, plochý pomalý. ease-out začína rýchlo a končí pomaly, čo pôsobí prirodzene pri prvkoch vstupujúcich na obrazovku. ease-in robí opak a hodí sa pre prvky, ktoré obrazovku opúšťajú.

Kľúčové slová CSS sú skratky: 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) a linear = (0, 0, 1, 1).

Aproximácia linear()

Novšia funkcia linear() uvádza hodnoty pokroku v rovnomerne rozložených časoch, napríklad linear(0, 0.25, 0.5, 0.75, 1), a spája ich priamkami. Nástroj vzorkuje tvoju krivku (pre každý časový krok vyrieši Bézierovu krivku) a zapíše tieto hodnoty na tri desatinné miesta. Pri 20 až 40 segmentoch je výsledok vizuálne totožný s krivkou. Skutočný prínos linear() je pri krivkách, ktoré Bézier nenakreslí, ako sú odrazy a pružiny, no umožňuje aj zdieľať jednu syntax. Funguje v Chrome a Edge 113+, Firefoxe 112+ a Safari 17.2+, preto si hodnotu cubic-bezier() ponechaj ako záložnú.