Material Design Štandardná krivka uvoľňovania
Navrhnite si vlastnú funkciu časovania CSS cubic-bezier() pretiahnutím dvoch kontrolných bodov, ukážte ich naživo oproti lineárnej referencii a potom skopírujte hotovú hodnotu.
Výsledok
Táto stránka otvorí generátor s už načítaným x1=0,4, y1=0, x2=0,2, y2=1 – štandardná krivka uvoľnenia uverejnená v pokynoch spoločnosti Google pre pohyb Material Design. Potiahnite rukoväť alebo upravte čísla a krivku, živý náhľad a kopírovateľné CSS sa aktualizujú.
Material Design nazýva túto krivku „štandardné uvoľnenie“ a odporúča ju pre väčšinu prechodov na obrazovke – prvky, ktoré sú už viditeľné a jednoducho sa pohybujú, menia veľkosť alebo miznú na tej istej obrazovke. Jeho tvar sa rýchlo zrýchli a potom jemne spomalí na miesto, čo je dôvod, prečo toľko aplikácií pre Android a webových používateľských rozhraní v štýle Material zdieľa rovnaký pocit prechodu bez toho, aby si niekto všimol, že používajú rovnaké štyri čísla.
Pustite ho priamo do funkcie prechodu-časovania alebo animácie-časovania-funkcie, aby ste získali pocit konzistentnosti s materiálom, alebo ho použite ako referenčný bod: Pokyny pre materiál tiež definujú samostatné krivky „spomalenia“ a „zrýchlenia“ pre prvky vstupujúce alebo opúšťajúce obrazovku, ktoré táto jediná štandardná krivka nemá nahradiť.