Cubic Bezier Generator
Design en tilpasset CSS cubic-bezier() timing-funksjon ved å dra to kontrollpunkter, forhåndsvise den live mot en lineær referanse, og kopier deretter klarverdien.
Resultat
Å skrive cubic-bezier(x1, y1, x2, y2) for hånd og laste inn siden på nytt for å sjekke følelsen er en treg måte å stille inn en animasjon på. Denne generatoren lukker den sløyfen: dra enten kontrollpunkthåndtaket på kurven, eller skriv inn eksakte tall i x1/y1/x2/y2-feltene, og kurven, den kopierbare CSS-strengen og forhåndsvisningen av live-animasjonen oppdateres ved hver endring – ingen byggetrinn, ingen omlasting.
De to aksene fungerer forskjellig med vilje. x1 og x2 forblir klemt mellom 0 og 1, fordi det er det CSS-spesifikasjonen faktisk krever av en cubic-bezier() tidsfunksjon - 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 overskrider starten eller slutten, noe som er nøyaktig hvordan fjær- og spretteffekter er bygget fra en enkelt lettelseskurve.
Å se et tall er ikke det samme som å se bevegelsen, så forhåndsvisningen kjører to identiske baller side ved side i en løkke: den ene beveger seg ved å bruke din egendefinerte kurve, den andre beveger seg i et vanlig konstant lineært tempo. Å se dem rase er den raskeste måten å finne ut om en lettelseskurve faktisk gir den følelsen du ønsker, før den noen gang når et stilark. De forhåndsinnstilte sidene – de reelle tallene bak CSSs eget lette-inn-ut-søkeord, en ærlig oversvingstilnærming som noen kaller en sprett, og Googles publiserte Material Design-standardkurve – er klare startpunkter du kan dra fra i stedet for tomme kontrollpunkter.
Alt kjører lokalt i nettleseren din: ingen opplasting, ingen konto, ingen server rundtur, og generatoren fortsetter å jobbe offline når siden har lastet inn.