Generátor CSS Cubic Bezier

Princípy fungovania časových funkcií v CSS

Pri tvorbe webových animácií a prechodov pomocou vlastností transition-timing-function alebo animation-timing-function určuje rýchlosť priebehu zmeny časová funkcia. Táto funkcia definuje, ako sa mení stav animácie v čase od jej začiatku (0 %) až po jej koniec (100 %). Základom pre tieto prechody je matematický koncept kubickej Bezierovej krivky (cubic Bezier curve), ktorá je v CSS vyjadrená zápisom cubic-bezier(x1, y1, x2, y2).

Krivka prebieha z dolného ľavého rohu (začiatok animácie v čase 0 a stave 0) do pravého horného rohu (koniec animácie v čase 1 a stave 1). Horizontálna os reprezentuje plynutie času zľava doprava, zatiaľ čo vertikálna os vyjadruje dosiahnutý pokrok smerom nahor. Tvar tejto krivky priamo ovplyvňuje rýchlosť a zrýchlenie animácie v každom jej okamihu.

Úloha riadiacich bodov (x1, y1, x2, y2)

Tvar krivky plynulosti určujú dva riadiace body, pričom každý z nich má priradené súradnice X a Y. Tieto body fungujú ako tiahla, ktoré ohýbajú krivku smerom k sebe:

• Prvý riadiaci bod (x1, y1): Ovplyvňuje začiatok a počiatočnú fázu prechodu.
• Druhý riadiaci bod (x2, y2): Ovplyvňuje záverečnú fázu a dobeh prechodu.

Pre súradnice platia presné limity, ktoré zabezpečujú fyzikálnu zmysluplnosť animácie v čase:

• Súradnice X (x1 a x2) musia zostať striktne v rozmedzí od 0 do 1. Čas nemôže plynúť pospiatky ani presiahnuť celkovú dĺžku trvania prechodu.
• Súradnice Y (y1 a y2) majú povolený rozsah od -0.70 do 1.70. To umožňuje, aby krivka vystúpila nad horný okraj alebo klesla pod dolný okraj, čím sa dosahujú špecifické vizuálne efekty.

Efekty prekmitu a spätného pohybu

Vďaka tomu, že hodnoty Y môžu presiahnuť štandardný rozsah 0 až 1, je možné navrhnúť pokročilé animačné efekty:

• Predvídanie (pull-back): Ak nastavíte hodnotu Y pod 0 (napríklad do záporných hodnôt k -0.70), animovaný objekt sa pred samotným pohybom vpred najprv mierne posunie dozadu, čím vytvorí efekt prípravy na pohyb.
• Prekmit (overshoot): Ak nastavíte hodnotu Y nad 1 (až do 1.70), animovaný objekt na konci prechodu presiahne svoju cieľovú pozíciu, následne sa vráti späť a ustáli sa na konečnej hodnote.

Tieto efekty dodávajú rozhraniu organický a fyzikálny charakter, ktorý pôsobí prirodzenejšie než lineárny pohyb.

Práca s generátorom a správanie rozhrania

Nástroj umožňuje vizuálne navrhovať tieto krivky ťahaním dvoch tiahel priamo na grafe. Počas úpravy krivky sa vedľa seba pohybujú dva body: jeden sa pohybuje podľa vami navrhnutej krivky a druhý sa pohybuje konštantnou, rovnomernou rýchlosťou. To umožňuje okamžité vizuálne porovnanie navrhovaného prechodu s lineárnym pohybom.

Pri zadávaní hodnôt do polí pre riadiace body platia nasledujúce pravidlá validácie a správania rozhrania:

• Vstupné hodnoty pre súradnice X sú obmedzené na rozsah 0 až 1.
• Vstupné hodnoty pre súradnice Y sú obmedzené na rozsah -0.70 až 1.70.
• Ak do poľa pre súradnicu X zadáte neplatnú hodnotu (napríklad 9) a kliknete mimo poľa (pole stratí zameranie), hodnota sa automaticky upraví na maximálny limit 1.
• Ak číselné pole úplne vymažete a zrušíte jeho zameranie, obnoví sa predchádzajúca platná hodnota.
• Prázdne alebo neúplné nečíselné vstupy nebudú spracované a systém počká na zadanie kompletnej hodnoty.
• Hodnoty môžete jemne dolaďovať aj pomocou klávesnice. Ak je vybrané konkrétne tiahlo riadiaceho bodu, stlačením šípky doľava zmeníte jeho hodnotu (napríklad na 0.99).

Po dosiahnutí požadovaného tvaru krivky môžete vygenerovanú hodnotu cubic-bezier(x1, y1, x2, y2) skopírovať pre použitie v CSS kóde. Po úspešnom skopírovaní sa zobrazí stav potvrdzujúci akciu.

Predvoľby a kľúčové slová v CSS

CSS špecifikácia obsahuje niekoľko preddefinovaných kľúčových slov, ktoré sú v skutočnosti iba zástupnými názvami pre konkrétne hodnoty kubických Bezierových kriviek. Generátor umožňuje vybrať tieto štandardné predvoľby, ako aj pokročilejšie prechody s prekmitom:

Limity jednej krivky cubic-bezier

Hoci je funkcia cubic-bezier() mimoriadne flexibilná, má svoje technické limity. Jedna krivka definovaná štyrmi bodmi dokáže vyjadriť iba prechody, ktoré sa pohybujú jedným smerom, prípadne s jedným počiatočným stiahnutím a jedným koncovým prekmitom pred ustálením.

Pomocou jednej funkcie cubic-bezier() nie je možné vytvoriť zložité fyzikálne efekty, ktoré vyžadujú viacnásobnú zmenu smeru, ako sú napríklad:

• Odraz (bounce): Efekt, kedy objekt dopadne na zem a niekoľkokrát sa odrazí nahor a nadol.
• Pružnosť (elastic): Kmitanie okolo cieľovej hodnoty s postupne klesajúcou amplitúdou.

Pre takéto komplexné animácie je potrebné použiť CSS kľúčové snímky (@keyframes) alebo novšiu funkciu linear(), ktorá umožňuje definovať prechod pomocou viacerých bodov.

Ochrana súkromia pri spracovaní

Používanie tohto nástroja je plne lokálne. Celý proces výpočtu súradníc, vykresľovanie grafu a simulácia pohybu bodov prebieha priamo vo vašom webovom prehliadači. Žiadne dáta, nastavenia ani parametre kriviek, ktoré v rozhraní nastavíte, sa neodosielajú na servery BroBroGo.

---

Často kladené otázky

Čo znamenajú dve tiahla a štyri čísla?

Krivka prebieha zľava dole (začiatok) doprava hore (koniec), pričom čas plynie zľava doprava a priebeh stúpa nahor. Dve tiahla sú riadiace body, ktoré ju ohýbajú – každé má súradnice X a Y, takže spoločne tvoria cubic-bezier(x1, y1, x2, y2). Súradnica X zostáva v rozmedzí 0 až 1, zatiaľ čo Y môže ísť nad horný okraj alebo pod dolný okraj, čím sa vytvorí prekmit alebo spätný pohyb pred ustálením.

Ako použijem túto hodnotu vo svojom CSS?

Skopírujte cubic-bezier() a vložte ho všade tam, kde sa používa časová funkcia – transition-timing-function, animation-timing-function alebo skrátený zápis, napr. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Kľúčové slová ease, ease-in, ease-out a ease-in-out sú len pevne stanovené krivky cubic-bezier, takže výberom jednej z týchto predvolieb uvidíte presnú hodnotu na pozadí.

Dá sa pomocou nej vytvoriť efekt odrazu alebo pružnosti?

Samotná nie. Jedna krivka cubic-bezier dokáže vytvoriť efekt predvídania a prekmitu – predvoľby „back“ presahujú rámec boxu presne na tento účel – ale dokáže sa pohybovať len jedným smerom a potom sa ustáliť. Efekty ako odraz (bounce) alebo pružnosť (elastic) menia smer viackrát, čo jedna krivka cubic-bezier nedokáže vyjadriť; na to sú potrebné CSS kľúčové snímky (keyframes) alebo funkcia linear() s viacerými bodmi.