0

Materiálové provedení Standardní křivka uvolňování

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.

Přetažením oranžového úchytu (P1) a červeného úchytu (P2) změňte tvar křivky – fungují také klávesy se šipkami. X zůstává sevřeno mezi 0 a 1, jak vyžaduje CSS; přetažením táhla nad nebo pod rámeček pošlete y za tento rozsah pro efekty překmitu a odrazu.

Vaše křivka

Lineární (pro srovnání)

Zpracování... 0%

Výsledek

Tato stránka otevře generátor s již načteným x1=0,4, y1=0, x2=0,2, y2=1 – standardní křivka náběhu/doběhu publikovaná v pokynech společnosti Google pro pohyb Material Design. Přetáhněte buď rukojeť nebo upravte čísla a křivku, živý náhled a kopírovatelné CSS se aktualizují společně.

Material Design nazývá tuto křivku „standardní náběh“ a doporučuje ji pro většinu přechodů na obrazovce – prvky, které jsou již viditelné a jednoduše se pohybují, mění velikost nebo mizí na stejné obrazovce. Jeho tvar se rychle zrychluje a poté jemně zpomaluje na místo, což je důvod, proč tolik aplikací pro Android a webových uživatelských rozhraní ve stylu Material sdílí stejný pocit přechodu, aniž by si někdo všiml, že používají stejná čtyři čísla.

Pusťte to rovnou do funkce přechodu-časování nebo animace-časování-funkce, abyste získali pocit konzistentní s materiálem, nebo jej použijte jako referenční bod: Pokyny pro materiál také definují samostatné křivky „zpomalení“ a „zrychlení“ pro prvky vstupující nebo opouštějící obrazovku, které tato jediná standardní křivka nemá nahradit.