Cubic Bezier Generator

At skrive cubic-bezier(x1, y1, x2, y2) i hånden og genindlæse siden for at kontrollere følelsen er en langsom måde at tune en animation på. Denne generator lukker denne sløjfe: træk enten kontrolpunkthåndtaget på kurven, eller skriv nøjagtige tal i x1/y1/x2/y2-felterne, og kurven, den kopierbare CSS-streng og forhåndsvisningen af ​​liveanimationen opdateres alle ved hver ændring - intet byggetrin, ingen genindlæsning.

De to akser arbejder forskelligt med vilje. x1 og x2 forbliver fastspændt mellem 0 og 1, fordi det er, hvad CSS-specifikationen faktisk kræver af en cubic-bezier() timingfunktion - en værdi uden for dette område er simpelthen ugyldig. y1 og y2 har ingen sådan begrænsning: Træk et håndtag over toppen af ​​boksen eller under bunden, og kurven overskrider sin start eller slutning, hvilket er præcis, hvordan fjeder- og bounce-effekter er bygget op fra en enkelt lempende kurve.

At se et tal er ikke det samme som at se bevægelsen, så forhåndsvisningen kører to identiske bolde side om side på en løkke: Den ene bevæger sig ved hjælp af din tilpassede kurve, den anden bevæger sig i et almindeligt konstant lineært tempo. At se dem race er den hurtigste måde at se, om en lempende kurve faktisk giver den følelse, du ønsker, før den nogensinde når et stylesheet. De forudindstillede sider - de reelle tal bag CSS's eget lethed-i-ud-søgeord, en ærlig overskridelsestilnærmelse, som nogle kalder et bounce, og Googles offentliggjorte Material Design-standardkurve - er klar startpunkter, du kan trække fra i stedet for tomme kontrolpunkter.

Alt kører lokalt i din browser: ingen upload, ingen konto, ingen server rundtur, og generatoren fortsætter med at arbejde offline, når siden er indlæst.