Kubický Bézierův generátor
Navrhněte vlastní funkci časování cubic-bezier() pomocí CSS přetažením dvou kontrolních bodů, prohlédněte si ji v živém náhledu proti lineární referenci a poté zkopírujte připravenou hodnotu.
Výsledek
Ruční psaní cubic-bezier(x1, y1, x2, y2) a opětovné načtení stránky pro kontrolu dojmu je pomalý způsob, jak vyladit animaci. Tento generátor tuto smyčku uzavírá: přetáhněte buď úchyt ovládacího bodu na křivce, nebo zadejte přesná čísla do polí x1/y1/x2/y2 a křivka, kopírovatelný řetězec CSS a náhled živé animace se aktualizují při každé změně – žádný krok sestavení, žádné opětovné načítání.
Tyto dvě osy fungují záměrně odlišně. x1 a x2 zůstávají sevřeny mezi 0 a 1, protože to je to, co specifikace CSS ve skutečnosti vyžaduje od funkce časování cubic-bezier() – hodnota mimo tento rozsah je prostě neplatná. y1 a y2 žádný takový limit nemají: přetáhněte táhlo nad horní část rámečku nebo pod spodní část a křivka překročí svůj začátek nebo konec, což je přesně způsob, jakým jsou efekty pružiny a odrazu vytvořeny z jediné křivky náběhu/doběhu.
Vidět číslo není totéž jako vidět pohyb, takže náhled běží dvě identické koule vedle sebe ve smyčce: jedna se pohybuje pomocí vaší vlastní křivky, druhá se pohybuje prostým konstantním lineárním tempem. Sledovat, jak závodí, je nejrychlejší způsob, jak zjistit, zda křivka uvolňování skutečně vytváří pocit, který chcete, ještě předtím, než se dostane do šablony stylů. Přednastavené stránky – skutečná čísla za vlastním klíčovým slovem CSS – easy-in-out, poctivá aproximace překmitu, kterou někteří nazývají odrazem, a standardní křivka Material Design publikovaná společností Google – jsou připravené výchozí body, ze kterých můžete přetahovat místo prázdných kontrolních bodů.
Vše běží lokálně ve vašem prohlížeči: žádné nahrávání, žádný účet, žádná zpáteční cesta na server a generátor po načtení stránky funguje offline.