CSS Easing Curve ve stylu Bounce
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
Tato stránka otevře generátor s již načteným x1=0,68, y1=-0,55, x2=0,265, y2=1,55 — křivka překmitu některých knihoven náběhu a náběhu s označením easyOutBack. Záporné y1 a y2 nad 1 jsou přesně důvodem, proč se náhled animace níže stáhne za svůj začátek a za konec, než se usadí; přetáhněte buď rukojeť nebo upravte čísla, aby byl efekt silnější nebo jemnější.
Abych byl upřímný, o co se jedná: jedna křivka cubic-bezier() má pouze dva řídicí body, takže se může aproximovat jednomu překmitu a ustálení pohybu, nikoli skutečnému vícenásobnému fyzickému odrazu s několika klesajícími skoky. Pro doslovný efekt odskoku míče byste potřebovali několik klíčových snímků nebo segmentů kroků () zřetězených dohromady – tato křivka je nejblíže, jaká může obyčejná funkce načasování přechodu dosáhnout v jednom řádku.
Tento jediný překmit je stále přesně to, co většina houževnatého uživatelského rozhraní chce: tlačítko, které lehce překročí svou klidovou velikost, modal, který přestřelí, než se usadí, karta, která zaskočí na místo. Zkopírujte hodnotu tak, jak je, pro ten svižný pocit, nebo změkčte y1 směrem k 0 a y2 směrem k 1, abyste vytočili překmit zpět.