Cubic Bezier Generator

Å skrive cubic-bezier(x1, y1, x2, y2) for hånd og laste siden på nytt for å sjekke følelsen er en treg måte å finjustere en animasjon på. Denne generatoren lukker den sløyfen: dra et kontrollpunkthåndtak på kurven, eller skriv nøyaktige tall inn i x1/y1/x2/y2-feltene, så oppdateres kurven, den kopierbare CSS-strengen og den direkte animasjonsforhåndsvisningen ved hver endring — uten byggetrinn, uten omlasting.

De to aksene fungerer forskjellig med vilje. x1 og x2 holdes klemt mellom 0 og 1, fordi det er det CSS-spesifikasjonen faktisk krever av en cubic-bezier()-timingfunksjon — en verdi utenfor dette området er rett og slett ugyldig. y1 og y2 har ingen slik grense: dra et håndtak over toppen av boksen eller under bunnen, og kurven overslenger forbi starten eller slutten, noe som er akkurat hvordan fjær- og sprettstil-effekter bygges fra en enkelt easingkurve.

Å se et tall er ikke det samme som å se bevegelsen, så forhåndsvisningen kjører to identiske kuler side om side i en løkke: en beveger seg med din egendefinerte kurve, den andre beveger seg i et vanlig konstant lineært tempo. Å se dem konkurrere er den raskeste måten å fortelle om en easingkurve faktisk gir den følelsen du ønsker, før den i det hele tatt når et stilsett. Forhåndssidene — de virkelige tallene bak CSS sitt eget ease-in-out-nøkkelord, en ærlig overslengstilnærming noen kaller et sprett, og Googles publiserte Material Design-standardkurve — er klare utgangspunkter du kan dra fra i stedet for blanke kontrollpunkter.

Alt kjøres lokalt i nettleseren din: ingen opplasting, ingen konto, ingen rundtur til en server, og generatoren fortsetter å fungere offline når siden er lastet.