Cubic Bezier Generator

Att skriva cubic-bezier(x1, y1, x2, y2) för hand och ladda om sidan för att kontrollera känslan är ett långsamt sätt att ställa in en animation. Den här generatorn stänger den slingan: dra antingen kontrollpunktshandtaget på kurvan eller skriv in exakta siffror i x1/y1/x2/y2-fälten, och kurvan, den kopierbara CSS-strängen och liveanimeringen uppdateras alla vid varje ändring – inget byggsteg, ingen omladdning.

De två axlarna fungerar olika med avsikt. x1 och x2 förblir klämda mellan 0 och 1, eftersom det är vad CSS-specifikationen faktiskt kräver av en cubic-bezier() tidsfunktion - 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 rutans överkant eller under botten, och kurvan överskrider sin början eller dess slut, vilket är exakt hur fjäder- och studseffekter byggs från en enda lättnadskurva.

Att se ett nummer är inte detsamma som att se rörelsen, så förhandsgranskningen kör två identiska bollar sida vid sida i en slinga: den ena rör sig med din anpassade kurva, den andra rör sig i en vanlig konstant linjär takt. Att se dem rasa är det snabbaste sättet att avgöra om en lättnadskurva faktiskt ger den känsla du vill ha, innan den någonsin når en stilmall. De förinställda sidorna – de verkliga siffrorna bakom CSS:s eget lätt-in-ut-sökord, en ärlig överskridande approximation som vissa kallar en studs och Googles publicerade Material Design-standardkurva – är färdiga startpunkter du kan dra från snarare än tomma kontrollpunkter.

Allt körs lokalt i din webbläsare: ingen uppladdning, inget konto, ingen server tur och retur, och generatorn fortsätter att arbeta offline när sidan har laddats.