Material Design Standard Easing Curve
Design en tilpasset CSS cubic-bezier() timing-funksjon ved å dra to kontrollpunkter, forhåndsvise den live mot en lineær referanse, og kopier deretter klarverdien.
Resultat
Denne siden åpner generatoren med x1=0.4, y1=0, x2=0.2, y2=1 allerede lastet inn – standard easing-kurven publisert i Googles retningslinjer for materialdesign. Dra enten håndtaket eller rediger tallene, og kurven, den direkte forhåndsvisningen og den kopierbare CSS-oppdateringen sammen.
Material Design kaller denne kurven "standard easing" og anbefaler den for de fleste overganger på skjermen - elementer som allerede er synlige og som ganske enkelt beveger seg, endrer størrelse eller falmer på samme skjerm. Formen akselererer raskt, og bremser deretter forsiktig på plass, og det er grunnen til at så mange Android-apper og materialstilte nettgrensesnitt deler den samme overgangsfølelsen uten at noen legger merke til at de bruker de samme fire tallene.
Slipp den rett inn i overgangs-timing-funksjon eller animasjon-timing-funksjon for en materialkonsistent følelse, eller bruk den som et referansepunkt: Materialets retningslinjer definerer også separate "retardere" og "akselerer"-kurver for elementer som kommer inn eller forlater skjermen, som denne enkle standardkurven ikke er ment å erstatte.