Medžiagų dizaino standartinė lengvinimo kreivė
Sukurkite pasirinktinę CSS cubic-bezier() laiko nustatymo funkciją vilkdami du valdymo taškus, peržiūrėkite ją tiesiogiai pagal tiesinę nuorodą, tada nukopijuokite paruoštą reikšmę.
Rezultatas
Šiame puslapyje atidaromas generatorius, kai x1=0.4, y1=0, x2=0.2, y2=1 jau įkelta – standartinė lengvinimo kreivė, paskelbta „Google“ medžiagų dizaino judėjimo gairėse. Vilkite rankenėlę arba redaguokite skaičius ir kreivę, tiesioginę peržiūrą ir kopijuojamą CSS naujinį.
Material Design šią kreivę vadina „standartiniu palengvinimu“ ir rekomenduoja ją atlikti daugeliui ekrano perėjimų – elementų, kurie jau matomi ir tiesiog juda, keičiasi arba blunka tame pačiame ekrane. Jo forma greitai įsibėgėja, tada švelniai lėtėja į vietą, todėl tiek daug „Android“ programų ir „Medžiagos“ stiliaus žiniatinklio vartotojo sąsajų turi tą patį perėjimo jausmą, niekam nepastebėjus, kad jie naudoja tuos pačius keturis skaičius.
Perkelkite jį tiesiai į perėjimo laiko funkciją arba animacijos laiko funkciją, kad jaustumėtės nuosekliai, arba naudokite kaip atskaitos tašką: Medžiagos gairėse taip pat apibrėžiamos atskiros „lėtėjimo“ ir „pagreičio“ kreivės įeinantiems į ekraną arba iš jo išeinantiems elementams, kurių ši viena standartinė kreivė nėra skirta pakeisti.