⭐ 0
🔍
Tekst Billede PDF & Docs Lyd Musik Elektronik Tid Hjælpeprogrammer Validatorer Esoterisk Spil

Materiale Design Standard Easing Curve

Design en tilpasset CSS cubic-bezier()-timingfunktion ved at trække to kontrolpunkter, forhåndsvise den live mod en lineær reference, og kopier derefter klarværdien.

Træk det orange håndtag (P1) og det røde håndtag (P2) for at omforme kurven – piletasterne virker også. X forbliver klemt mellem 0 og 1, som CSS kræver; træk et håndtag over eller under boksen for at sende y forbi dette område til overskridelse og afvisningseffekter.

Din kurve

Lineær (til sammenligning)

Behandler... 0%

Resultat

Denne side åbner generatoren med x1=0.4, y1=0, x2=0.2, y2=1 allerede indlæst - standard lempelseskurven offentliggjort i Googles retningslinjer for materialedesign. Træk enten håndtag eller rediger tallene, og kurven, live-eksemplet og den kopierbare CSS-opdatering sammen.

Materialedesign kalder denne kurve "standard easing" og anbefaler den til de fleste overgange på skærmen - elementer, der allerede er synlige og simpelthen flytter, ændrer størrelse eller falmer på samme skærm. Dens form accelererer hurtigt og decelererer derefter forsigtigt på plads, hvilket er grunden til, at så mange Android-apps og materiale-stylede web-brugergrænseflader deler den samme overgangsfølelse, uden at nogen bemærker, at de bruger de samme fire numre.

Slip det direkte ind i overgangs-timing-funktion eller animation-timing-funktion for en materiale-konsistent fornemmelse, eller brug det som et referencepunkt: Materialets retningslinjer definerer også separate "decelerate" og "accelerate" kurver for elementer, der kommer ind i eller forlader skærmen, som denne enkelte standardkurve ikke er beregnet til at erstatte.

🛡️
Udføres i browser

Dine filer og input forlader aldrig denne enhed. Behandlingen kører helt offline. 100 % sikker.

Accepterede formater og regler

  • Trækbar SVG-kurveeditor med to håndtag (P1 og P2) plus redigerbare x1/y1/x2/y2-talinput for pixelpræcise værdier.
  • Forhåndsvisning af sløjfeanimation, der sammenligner din tilpassede cubic-bezier() timing med en lineær referencebold, så du kan se lempelsen, ikke bare læse den.
  • Kopierbar cubic-bezier(x1, y1, x2, y2) streng klar til overgang-timing-funktion eller animation-timing-funktion, plus forudindstillede sider til lethed-ind-ud, bounce og Material Designs standardkurve.

Vigtige fordele

✓ Træk et af kontrolpunktshåndtagene, og se kurven, forhåndsvisningen af live animation og den kopierbare CSS-streng opdateres alle sammen - ingen grund til at huske koordinatmatematikken.
✓ Y kan overskride 0 og 1 for spring- og bounce-effekter, mens X forbliver fastspændt til det 0-1-område, som CSS faktisk kræver, så hver værdi, du kopierer, er gyldig i det øjeblik, du indsætter den.
✓ Forhåndsvisningen side om side kører din brugerdefinerede kurve mod en almindelig lineær reference, så forskellen i bevægelsesfølelse - hele grunden til at bruge lempelse - er indlysende med et blik, ikke kun et kodeoutput.

Brug Cases

  • • Har du brug for en tilpasset CSS overgang-timing-funktion eller animation-timing-funktion værdi i stedet for et af de indbyggede lethedsnøgleord?
  • • Vil du se præcis, hvordan cubic-bezier(0.42, 0, 0.58, 1) — de reelle tal bag CSS' eget ease-in-out søgeord — ser ud i bevægelse, før du sender det?
  • • Bygger du en hoppeknap-, modal- eller kortanimation og har brug for en klar overskridelseskurve til at kopiere direkte ind i dit stylesheet?