Klíčové poznatky
- 01Táhněte dvě ovládací prvky kontrolního bodu, abyste vytvořili křivku usnadnění vizuálně spíše než hádat číselné hodnoty.
- 02Animace živé koule se přehrává pomocí časování, abyste mohli pocítit pohyb před potvrzením.
- 03Všech pět přednastavení CSS (ease, linear, ease-in, ease-out, ease-in-out) jsou dostupné jako výchozí body.
- 04Hodnota cubic-bezier() se aktualizuje naživo se dvěma desetinnými místy přesnosti, připravená k vložení do jakékoliv CSS vlastnosti.
Proč měly vlastní křivky usnadnění smlouvu pro pohyb uživatelského rozhraní
Vestavěné funkce časování CSS — ease, ease-in-out, linear — pokrývají spoustu půdy, ale každé uživatelské rozhraní má chvíle, kdy výchozí připadá trochu špatně. Tip, který se jeví příliš ostře, modální, který překročí při otevření, nebo indikátor průběhu, který se cítí mechanický. Cubic-bezier křivky vám umožní vyladit pohyb tak, aby se cítil přirozený spíše než mechanický, ale čtyři čísla v cubic-bezier(0.4, 0, 0.2, 1) jsou téměř nemožné uvažovat přímo.
Editor cubic-bezier aplikace Handytool změní tato čísla na vizuální křivku se dvěma přetahovánými ovládacími prvky. Přesuňte ovládací prvek a animace koule se přehraje okamžitě, abyste mohli opakovat pocitem, dokud pohyb neodpovídá vaší záměru. Pak zkopírujte hodnotu a přetáhněte ji do svého CSS — hotovo.
Jak navrhnout křivku CSS usnadnění
- 01
Začněte od přednastavení
Vyberte ease, linear, ease-in, ease-out nebo ease-in-out jako základ. Ovládací prvky se přichytí ke správným polohám pro každé přednastavení.
- 02
Táhněte ovládací prvky kontrolního bodu
Každý ovládací prvek řídí jeden konec křivky — počáteční ovládací prvek tvaruje počáteční zrychlení, konečný ovládací prvek tvaruje konečné zpomalení. Přesunutí ovládacího prvku automaticky přepne přednastavení na 'vlastní'.
- 03
Sledujte animaci koule
Koule se animuje zleva doprava pomocí vaší křivky. Nastavte jezdec trvání na náhled pomalé vs. rychlé přechody.
- 04
Experimentujte s překročením
Táhněte ovládací prvek osy Y výše než 1 nebo níže 0, abyste vytvořili překročení a podtečení — efekt 'bouncy', který vytváří otevření nabídky energicky.
- 05
Zkopírujte hodnotu CSS
Klikněte na Kopírovat a vezměte si řetězec cubic-bezier() a vložte jej do transition-timing-function nebo animation-timing-function ve vašem stylopisu.
Běží zcela v prohlížeči
Editor je samostatný nástroj prohlížeče — bez písem, bez skriptů a bez data se načítají po otevření stránky. Přetahování ovládacích prvků a náhled animací funguje offline. Vzorec cubic-bezier používaný pro náhled koule je stejný, který prohlížeče používají pro CSS přechody, takže to, co vidíte v editoru, je přesně to, co váš stylopis vytvoří.
Nic není k instalaci a nic se nemusí registrovat. Výstup je jediná hodnota CSS — vložte ji a máte hotovo.
Časté otázky editoru Cubic-Bezier
Co je křivka usnadnění cubic-bezier?
Jedná se o matematickou křivku definovanou dvěma kontrolními body, která určuje, jak se přechod nebo animace CSS zrychluje v průběhu času. Čtyři čísla v cubic-bezier(x1, y1, x2, y2) nastavují pozice těchto kontrolních bodů.
Proč mohou hodnoty Y jít nad 1 nebo pod 0?
Hodnoty Y mimo rozsah 0–1 vytváří překročení a podtečení — křivka jde za svůj koncový bod, než se usadí. To vytváří efekt 'bouncy' usnadnění. Hodnoty X musí zůstat v rozsahu 0–1.
Jak používám výstup?
Zkopírujte řetězec cubic-bezier(...) a vložte jej do jakékoliv vlastnosti transition-timing-function nebo animation-timing-function CSS. Funguje v každém moderním prohlížeči.
Co vlastně znamená ease-in-out?
Ease-in-out se spouští pomalu, zrychluje se uprostřed a zpomaluje na konci — cubic-bezier(0.42, 0, 0.58, 1). Zrcadluje to, jak skutečné předměty zrychlují a zpomalují, a je výchozí volbou pro nejčastější vyleštěný pohyb uživatelského rozhraní.
Je náhled animace koule přesný na CSS?
Ano — náhled používá stejný vzorec cubic bezier, který prohlížeče aplikují na CSS přechody. Jezdec trvání vám umožňuje pocítit pomalé vs. rychlé křivky před potvrzením.