Cubic Bezier Generator

Att skriva cubic-bezier(x1, y1, x2, y2) för hand och ladda om sidan för att kolla känslan är ett långsamt sätt att finjustera en animation. Denna generator sluter den loopen: dra ett kontrollpunkt-handtag på kurvan, eller skriv exakta siffror i fälten för x1/y1/x2/y2, så uppdateras kurvan, den kopierbara CSS-strängen och den levande förhandsvisningen av animationen vid varje ändring – inget byggsteg, ingen omladdning.

De två axlarna fungerar olika med flit. x1 och x2 hålls kvar mellan 0 och 1, eftersom det är vad CSS-specifikationen faktiskt kräver av en cubic-bezier()-timingfunktion – ett värde utanför det intervallet är helt enkelt ogiltigt. y1 och y2 har ingen sådan gräns: dra ett handtag ovanför boxens överkant eller under dess underkant, så överskjuter kurvan förbi sin start eller sitt slut, vilket är precis hur fjädrings- och studseffekter byggs från en enda easingkurva.

Att se en siffra är inte detsamma som att se rörelsen, så förhandsvisningen kör två identiska bollar sida vid sida i en loop: en rör sig med din anpassade kurva, den andra rör sig i en vanlig konstant linjär takt. Att se dem tävla är det snabbaste sättet att avgöra om en easingkurva faktiskt ger den känsla du vill ha, innan den når en stilmall. De förinställda sidorna – de verkliga siffrorna bakom CSS:s eget ease-in-out-nyckelord, en ärlig överskjutningsapproximation som vissa kallar studs, och Googles publicerade standardkurva för Material Design – är färdiga startpunkter du kan dra från istället för blanka kontrollpunkter.

Allt körs lokalt i din webbläsare: ingen uppladdning, inget konto, ingen server-kommunikation, och generatorn fortsätter att fungera offline när sidan väl har laddats.