Editor cubic-bezier

Jak používat editor cubic-bezier

1. Táhni dva úchyty v grafu. P1 (první řídicí bod) tvaruje začátek pohybu, P2 konec. Čas plyne zleva doprava a postup zdola nahoru.
2. Nebo napiš hodnotu do pole Hodnota cubic-bezier(): úplné cubic-bezier(0.4, 0, 0.2, 1), čtyři čísla nebo klíčové slovo, například ease-in-out. Pole x1, y1, x2 a y2 upravují vždy jednu souřadnici.
3. Začni v nabídce Předvolby (klíčová slova CSS, rodiny od sine po back a křivky Material Design) nebo tlačítky s klíčovými slovy. Když tvá křivka odpovídá předvolbě, její název se zobrazí vedle tlačítek.
4. Sleduj Náhled animace: bod na Tvoje křivka a bod na linear urazí stejnou vzdálenost za stejnou Délku. Pomocí Pozastavit/Přehrát a Spustit znovu je můžeš porovnat.
5. Výsledek zkopíruj z pole Časovací funkce CSS, nebo zkopíruj Aproximaci linear() a vyber počet Segmentů.

Klávesnice: vyber úchyt a šipkami ho posouváš o 0,01, se Shiftem o 0,1.

Pokud je tvůj systém nastaven na omezení pohybu, animace se spustí pozastavená. Chceš-li ji přesto přehrát, stiskni Přehrát.

Nástroj funguje ve tvém prohlížeči. Nic, co zadáš, se neodesílá na server.

Co znamená cubic-bezier()

Easing funkce CSS převádí uplynulý čas přechodu (0 až 1) na jeho postup (0 až 1). cubic-bezier(x1, y1, x2, y2) toto zobrazení popisuje kubickou Bézierovou křivkou, která začíná v bodě (0, 0), končí v (1, 1) a je tažena dvěma řídicími body, P1 = (x1, y1) a P2 = (x2, y2).

• Hodnoty x jsou časy a musí zůstat mezi 0 a 1, jinak by funkce nebyla platnou časovací křivkou. Editor je drží v rozsahu.
• Hodnoty y jsou postup a mohou jít pod 0 nebo nad 1. Hodnota y nad 1 způsobí, že animace přestřelí cíl a vrátí se, jako u křivek Back; pod 0 se nejprve pohne zpět.
• Strmý sklon znamená rychlý pohyb, plochý pomalý. ease-out začíná rychle a končí pomalu, což působí přirozeně u prvků vstupujících na obrazovku. ease-in dělá opak a hodí se pro prvky, které obrazovku opouštějí.

Klíčová slova CSS jsou zkratky: 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).

Aproximace linear()

Novější funkce linear() vyjmenovává hodnoty postupu v rovnoměrně rozmístěných časech, například linear(0, 0.25, 0.5, 0.75, 1), a spojuje je přímkami. Nástroj tvou křivku vzorkuje (pro každý časový krok řeší Bézierovu křivku) a zapisuje hodnoty na tři desetinná místa. S 20 až 40 segmenty je výsledek vizuálně totožný s křivkou. Skutečný přínos linear() je u křivek, které Bézier nenakreslí, jako jsou odrazy a pružiny, ale umožňuje to také sdílet jednu syntaxi. Funguje v Chrome a Edge 113+, Firefoxu 112+ a Safari 17.2+, takže hodnotu cubic-bezier() ponech jako zálohu.