Material Design Standard Easing Curve
Designa en anpassad CSS cubic-bezier()-timingfunktion genom att dra två kontrollpunkter, förhandsgranska den live mot en linjär referens och kopiera sedan färdigvärdet.
Resultat
Den här sidan öppnar generatorn med x1=0,4, y1=0, x2=0,2, y2=1 redan laddade – standardkurvan för lättnad som publiceras i Googles riktlinjer för materialdesign. Dra antingen handtag eller redigera siffrorna och kurvan, liveförhandsvisningen och den kopierbara CSS-uppdateringen tillsammans.
Materialdesign kallar denna kurva för "standardlättnad" och rekommenderar den för de flesta övergångar på skärmen — element som redan är synliga och helt enkelt flyttar, ändrar storlek eller bleknar inom samma skärm. Dess form accelererar snabbt och saktar sedan långsamt in på plats, vilket är anledningen till att så många Android-appar och materialliknande webbgränssnitt delar samma övergångskänsla utan att någon märker att de använder samma fyra siffror.
Släpp den rakt in i övergångstidsfunktion eller animeringstidfunktion för en materialkonsistent känsla, eller använd den som en referenspunkt: Materialets riktlinjer definierar också separata "retardera" och "accelerera" kurvor för element som kommer in i eller lämnar skärmen, som denna enda standardkurva inte är avsedd att ersätta.