Generátor kubických Bézierových křivek
Navrhněte si vlastní časovací funkci CSS cubic-bezier() přetažením dvou ovládacích bodů, živě ji porovnejte s lineární referencí a poté zkopírujte hotovou hodnotu.
🔒 Zpracováno výhradně ve vašem prohlížeči – nic, co zde zadáte, se nikdy nenahraje.
Výsledek
Ruční psaní cubic-bezier(x1, y1, x2, y2) a obnovování stránky pro kontrolu pocitu je pomalý způsob dolaďování animace. Tento generátor tuto smyčku uzavírá: přetáhněte kterýkoli ovládací úchyt na křivce nebo zadejte přesná čísla do polí x1/y1/x2/y2 a křivka, zkopírovatelný CSS řetězec i živý náhled animace se aktualizují při každé změně – bez nutnosti sestavení, bez obnovování.
Obě osy fungují záměrně odlišně. x1 a x2 zůstávají omezené mezi 0 a 1, protože to je přesně to, co specifikace CSS pro časovací funkci cubic-bezier() skutečně vyžaduje – hodnota mimo tento rozsah je prostě neplatná. y1 a y2 takové omezení nemají: přetáhněte úchyt nad horní okraj pole nebo pod spodní okraj a křivka překmitne za svůj začátek nebo konec, což je přesně způsob, jak se z jediné easing křivky vytvářejí efekty pružení a odrazu.
Vidět číslo není totéž jako vidět pohyb, proto náhled ve smyčce zobrazuje dvě identické kuličky vedle sebe: jedna se pohybuje podle vaší vlastní křivky, druhá prostým konstantním lineárním tempem. Sledovat, jak závodí, je nejrychlejší způsob, jak zjistit, zda easing křivka skutečně vytváří požadovaný pocit, ještě předtím, než se vůbec dostane do stylopisu. Stránky s předvolbami – skutečná čísla za vlastním klíčovým slovem CSS ease-in-out, poctivá aproximace překmitu, které někteří říkají odraz, a publikovaná standardní křivka Material Design od Googlu – jsou připravenými výchozími body, od kterých můžete táhnout, namísto prázdných ovládacích bodů.
Vše běží lokálně ve vašem prohlížeči: žádné nahrávání, žádný účet, žádná komunikace se serverem a generátor po načtení stránky funguje i offline.