⭐ 0
🔍
Tekst Afbeelding PDF & Documenten Audio Muziek Elektronica Tijd Hulpprogramma's Validators Esoterie Spellen

Materiaalontwerp Standaard versoepelingscurve

Ontwerp een aangepaste CSS-cubic-bezier()-timingfunctie door twee controlepunten te slepen, een live voorbeeld ervan te bekijken tegen een lineaire referentie en vervolgens de gereedwaarde te kopiëren.

Versleep de oranje hendel (P1) en de rode hendel (P2) om de curve een nieuwe vorm te geven. De pijltjestoetsen werken ook. X blijft tussen 0 en 1 geklemd zoals CSS vereist; sleep een handvat boven of onder het vak om y voorbij dat bereik te sturen voor doorschiet- en stuitereffecten.

Jouw ronding

Lineair (ter vergelijking)

Verwerken... 0%

Resultaat

Deze pagina opent de generator met x1=0,4, y1=0, x2=0,2, y2=1 al geladen - de standaard versoepelingscurve gepubliceerd in de Material Design-bewegingsrichtlijnen van Google. Sleep de hendel of bewerk de cijfers, de curve, de live preview en de kopieerbare CSS-update samen.

Material Design noemt deze curve 'standaard versoepeling' en beveelt deze aan voor de meeste overgangen op het scherm: elementen die al zichtbaar zijn en eenvoudigweg worden verplaatst, vergroot of vervaagd binnen hetzelfde scherm. De vorm versnelt snel en vertraagt ​​vervolgens langzaam op zijn plaats. Daarom delen zoveel Android-apps en web-UI's in Material-stijl hetzelfde overgangsgevoel zonder dat iemand merkt dat ze dezelfde vier cijfers gebruiken.

Plaats het rechtstreeks in de transitie-timing-functie of animatie-timing-functie voor een materiaalconsistent gevoel, of gebruik het als referentiepunt: de richtlijnen van Material definiëren ook afzonderlijke "vertragings" en "versnellings" curven voor elementen die het scherm binnenkomen of verlaten, die deze enkele standaardcurve niet mag vervangen.

🛡️
Uitgevoerd in browser

Uw bestanden en invoer verlaten dit apparaat nooit. Verwerking verloopt volledig offline. 100% veilig.

Geaccepteerde formaten & regels

  • Versleepbare SVG-curve-editor met twee handvatten (P1 en P2) plus bewerkbare x1/y1/x2/y2-getalinvoer voor pixelprecieze waarden.
  • Looping-animatievoorbeeld waarin uw aangepaste cubische-bezier()-timing wordt vergeleken met een lineaire referentiebal, zodat u de versoepeling kunt zien en niet alleen kunt lezen.
  • Kopieerbare kubieke bezier(x1, y1, x2, y2) string klaar voor transitie-timing-functie of animatie-timing-functie, plus vooraf ingestelde pagina's voor easy-in-out, bounce en de standaardcurve van Material Design.

Belangrijkste voordelen

✓ Sleep een van de controlepunten en bekijk de curve, het live-animatievoorbeeld en de kopieerbare CSS-tekenreeks die allemaal samen worden bijgewerkt. U hoeft de coördinatenwiskunde niet te onthouden.
✓ Y kan voorbij 0 en 1 voorbijschieten voor veer- en stuitereffecten, terwijl X vast blijft zitten aan het bereik van 0–1 dat CSS feitelijk vereist, dus elke waarde die u kopieert is geldig op het moment dat u deze plakt.
✓ De side-by-side preview vergelijkt uw aangepaste curve met een duidelijke lineaire referentie, zodat het verschil in bewegingsgevoel (de hele reden om versoepeling te gebruiken) in één oogopslag duidelijk is, en niet alleen maar een code-uitvoer.

Toepassingen

  • • Heeft u een aangepaste CSS-overgangstimingfunctie of animatietimingfunctiewaarde nodig in plaats van een van de ingebouwde gemakssleutelwoorden?
  • • Wilt u precies zien hoe kubieke-bezier(0.42, 0, 0.58, 1) – de echte cijfers achter CSS's eigen easy-in-out trefwoord – er in beweging uitziet voordat u het verzendt?
  • • Bent u een veerkrachtige knop-, modale of kaartanimatie aan het bouwen en heeft u een kant-en-klare overshoot-versoepelingscurve nodig die u rechtstreeks naar uw stylesheet kunt kopiëren?