Material Design standaard-easingcurve
Ontwerp je eigen CSS cubic-bezier()-timingfunctie door twee controlepunten te verslepen, bekijk de beweging live tegen een lineaire referentie en kopieer vervolgens de bruikbare waarde.
Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.
Resultaat
Over dit hulpmiddel
Deze pagina opent de generator met x1=0.4, y1=0, x2=0.2, y2=1 al geladen — de standaard-easingcurve die is gepubliceerd in Google's bewegingsrichtlijnen voor Material Design. Versleep een handvat of bewerk de cijfers en de curve, de live voorvertoning en de kopieerbare CSS updaten samen.
Material Design noemt deze curve 'standaard-easing' en raadt hem aan voor de meeste overgangen op het scherm — elementen die al zichtbaar zijn en enkel bewegen, van formaat veranderen of vervagen binnen hetzelfde scherm. De vorm versnelt snel en remt vervolgens zachtjes af naar zijn plek, wat verklaart waarom zoveel Android-apps en Material-achtige webinterfaces hetzelfde overgangsgevoel delen zonder dat iemand merkt dat ze dezelfde vier getallen gebruiken.
Zet hem rechtstreeks in transition-timing-function of animation-timing-function voor een Material-consistent gevoel, of gebruik hem als referentiepunt: de richtlijnen van Material definiëren ook aparte 'decelerate'- en 'accelerate'-curves voor elementen die het scherm binnenkomen of verlaten, die deze ene standaardcurve niet moet vervangen.