Matematický princip a fungování CSS Cubic Bezier
Časové funkce v CSS určují, jakým způsobem se vyvíjí rychlost přechodu (transition) nebo animace v čase. Namísto konstantního lineárního pohybu umožňují plynulé zrychlení a zpomalení. Základem těchto efektů je kubická Bezierova křivka, která je v CSS definována funkcí cubic-bezier(x1, y1, x2, y2).
Křivka v grafu probíhá od levého dolního rohu, který představuje počátek (souřadnice 0, 0), do pravého horního rohu, jenž představuje konec (souřadnice 1, 1). Vodorovná osa reprezentuje čas, který plyne zleva doprava. Svislá osa vyjadřuje postup animace, který směřuje nahoru. Tvar této křivky ohýbají dva řídicí body, přičemž každý z nich je definován dvojicí souřadnic X a Y.
- První řídicí bod (x1, y1): Určuje zakřivení na začátku animace.
- Druhý řídicí bod (x2, y2): Určuje zakřivení na konci animace.
Zatímco časová osa X je striktně omezena fyzikálními limity a hodnoty X pro oba řídicí body musí zůstat v rozmezí 0 až 1, hodnoty Y mohou tyto hranice přesáhnout. Hodnota Y se může pohybovat v rozsahu od -0.70 do 1.70. Pokud se hodnota Y dostane pod 0 nebo nad 1, dochází k efektu stažení zpět (pull-back) nebo překmitnutí (overshoot) mimo cílový stav předtím, než se pohyb definitivně ustálí.
Vstupy a ovládání generátoru
Nástroj umožňuje přesné vizuální i numerické nastavení parametrů křivky. K úpravě tvaru slouží následující ovládací prvky:
- Tažení dvou táhel: Přímým posunem těchto bodů v grafu měníte tvar křivky plynulosti.
- První řídicí bod X: Číselná hodnota v rozmezí 0 až 1.
- První řídicí bod Y: Číselná hodnota v rozmezí -0.70 až 1.70.
- Druhý řídicí bod X: Číselná hodnota v rozmezí 0 až 1.
- Druhý řídicí bod Y: Číselná hodnota v rozmezí -0.70 až 1.70.
- Výběr předvolby: Rychlé nastavení standardních křivek jako "ease", "ease-in", "ease-out", "ease-in-out" nebo pokročilých průběhů "Back In", "Back Out" a "Back In-Out".
Při interakci s rozhraním platí pevná pravidla pro validaci vstupů. Pokud do pole pro souřadnici X zadáte neplatnou hodnotu, například 9, a kliknete mimo pole (ztratíte focus), hodnota se automaticky upraví na maximální povolenou mez 1. Smazání číselného pole a následná ztráta focusu obnoví předchozí platnou hodnotu. Prázdné nebo nečíselné vstupy neprovedou změnu a čekají na zadání kompletní hodnoty. Pro jemné doladění lze na vybraném táhle použít klávesnici; stisknutí šipky vlevo změní hodnotu například na 0.99.
Výstupy a vizualizace pohybu
Během úpravy parametrů generátor okamžitě vykresluje výsledný pohyb. Výstupní část obsahuje:
- vaše křivka: Vizuální zobrazení výsledné křivky plynulosti v grafu.
- Srovnávací animace: V reálném čase se vedle sebe pohybují dva body. Jeden bod se pohybuje po vaší křivce, zatímco druhý se pohybuje konstantním, rovnoměrným tempem. To umožňuje okamžitě vidět rozdíl v dynamice pohybu.
- cubic-bezier(x1, y1, x2, y2): Výsledný kód CSS připravený ke zkopírování.
- Copied: Stavová zpráva, která se zobrazí po úspěšném zkopírování hodnoty do schránky. Proces kopírování má pouze úspěšný stav a nezobrazuje žádná chybová hlášení.
Předvolba "Back Out" je v nástroji definována přesnou hodnotou cubic-bezier(0.34, 1.56, 0.64, 1). Tato konfigurace vysune druhé táhlo nad hodnotu 1 na ose Y, což způsobuje plynulé překmitnutí cílové pozice a následný návrat zpět.
Použití v CSS a limity jedné křivky
Získanou hodnotu cubic-bezier() lze v CSS aplikovat v rámci vlastností transition-timing-function a animation-timing-function, případně v jejich zkrácených zápisech transition a animation.
/* Příklad použití pro plynulý přechod */
.element {
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
Je však nutné vzít v úvahu limity, které jedna funkce cubic-bezier() má. Křivka dokáže vyjádřit počáteční stažení (anticipation) i koncové překmitnutí (overshoot), ale její průběh se může v čase pohybovat pouze jedním směrem a následně se ustálit. Pomocí jediné funkce cubic-bezier() nelze vytvořit komplexní efekty, které vyžadují vícenásobnou změnu směru, jako je například efekt odrazu (bounce) nebo opakované pružné kmitání (elastic).
Ochrana soukromí při práci
Křivka se vykresluje přímo ve vašem prohlížeči. Nic z toho, co zde nastavíte, se neodesílá na servery BroBroGo. Veškeré výpočty, vykreslování grafu i simulace pohybu probíhají lokálně na vašem zařízení.
Často kladené otázky (FAQ)
Co znamenají dvě táhla a čtyři čísla?
Křivka probíhá od levého dolního rohu (začátek) do pravého horního rohu (konec), přičemž čas plyne zleva doprava a postup jde nahoru. Obě táhla jsou řídicí body, které ji ohýbají – každý má souřadnice X a Y, takže dohromady tvoří cubic-bezier(x1, y1, x2, y2). X zůstává mezi 0 a 1, zatímco Y může jít nad horní okraj nebo pod dolní okraj, což způsobí překmitnutí pohybu nebo jeho stažení zpět před ustálením.
Jak mohu hodnotu použít ve svém CSS?
Zkopírujte cubic-bezier() a vložte jej kamkoli, kde se používá časová funkce – transition-timing-function, animation-timing-function nebo zkrácený zápis, např. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Klíčová slova ease, ease-in, ease-out a ease-in-out jsou jen pevné křivky cubic-bezier, takže výběr jedné z těchto předvoleb vám ukáže přesnou hodnotu za daným klíčovým slovem.
Dokáže vytvořit efekt odrazu nebo pružnosti?
Sama o sobě ne. Jedna křivka cubic-bezier dokáže vytvořit rozběh a překmit – předvolby „back“ vytáhnou jedno táhlo mimo box, aby přesně tohle udělaly – ale dokáže se pohybovat pouze jedním směrem a pak se ustálit. Efekty odrazu (bounce) a pružnosti (elastic) mění směr několikrát, což žádná samostatná křivka cubic-bezier nedokáže vyjádřit; pro ty jsou potřeba CSS klíčové snímky (keyframes) nebo funkce linear() s mnoha body.