Kubieke Bezier-generator

Het met de hand typen van cubische-bezier(x1, y1, x2, y2) en het opnieuw laden van de pagina om het gevoel te controleren, is een langzame manier om een animatie af te stemmen. Deze generator sluit die lus: sleep de controlepunthandgreep op de curve, of typ exacte getallen in de x1/y1/x2/y2-velden, en de curve, de kopieerbare CSS-tekenreeks en het live-animatievoorbeeld worden bij elke wijziging bijgewerkt - geen bouwstap, geen herlaadbeurt.

De twee assen werken met opzet anders. x1 en x2 blijven tussen 0 en 1 geklemd, omdat dat is wat de CSS-specificatie feitelijk vereist van een cubische-bezier()-timingfunctie; een waarde buiten dat bereik is eenvoudigweg ongeldig. y1 en y2 hebben zo'n limiet niet: sleep een hendel boven de bovenkant van de doos of onder de onderkant, en de curve schiet voorbij het begin of het einde, en dat is precies hoe veer- en stuitereffecten worden opgebouwd uit een enkele versoepelingscurve.

Het zien van een getal is niet hetzelfde als het zien van de beweging, dus in de preview worden twee identieke ballen naast elkaar in een lus weergegeven: de ene beweegt met behulp van uw aangepaste curve, de andere beweegt in een eenvoudig, constant lineair tempo. Ze zien racen is de snelste manier om erachter te komen of een versoepelingscurve daadwerkelijk het gevoel geeft dat je wilt, voordat deze ooit een stylesheet bereikt. De vooraf ingestelde pagina's (de echte getallen achter CSS's eigen 'easy-in-out'-trefwoord, een eerlijke overshoot-benadering die sommigen een 'bounce' noemen, en de door Google gepubliceerde standaardcurve van Material Design) zijn kant-en-klare startpunten waar je vanaf kunt slepen in plaats van lege controlepunten.

Alles draait lokaal in uw browser: geen upload, geen account, geen serverretour, en de generator blijft offline werken zodra de pagina is geladen.