Cubic Bezier Editor

Wat de vier getallen zijn

Een CSS easing curve is een kubische Bezier die altijd op (0,0) begint en op (1,1) eindigt. De vier getallen zijn de twee stuurpunten daartussen, en de assen zijn niet allebei ruimte: de horizontale is tijd en de verticale is voortgang. Dat ene feit verklaart allebei de regels die de editor afdwingt. De x-coördinaten worden begrensd op 0 en 1 omdat tijd niet achteruit kan lopen, en de specificatie verwerpt alles daarbuiten als ongeldig. De y-coördinaten worden helemaal niet begrensd, want voortgang die voorbij 100% gaat en terugzakt is precies hoe een veer, een stuiter of een doorschot geschreven wordt.

De gestippelde diagonaal in de editor is linear. Overal waar de curve erboven ligt, loopt de animatie voor op een run met constante snelheid; eronder loopt hij achter. Een ease-out curve verlaat de diagonaal meteen en komt er aan het eind weer bij, en daarom voelt het als iets dat aankomt en tot rust komt.

linear() is hoe veren nu geschreven worden

cubic-bezier() heeft precies twee stuurpunten, dus het kan geen curve beschrijven die meer dan één keer van richting wisselt. Een stuiter die drie keer de vloer raakt is er simpelweg niet mee uit te drukken, en tien jaar lang was het antwoord een JavaScript-animatiebibliotheek. linear() veranderde dat: het neemt een lijst voortgangsstops en benadert elke vorm met een gebroken lijn, en het is baseline in de huidige browsers.

Het tweede uitvoervak is deze curve als linear(), bemonsterd op twintig gelijk verdeelde momenten. Voor een gewone kubische curve is dat de langere manier om hetzelfde te zeggen, dus gebruik cubic-bezier(). De waarde ervan zit in het startpunt: plak hem, en voeg daarna stops toe of verplaats ze om de easing met meerdere stuiters of meerdere fasen te bouwen die de vorm met twee stuurpunten nooit kon halen. Vrijwel geen enkele gratis generator levert dit.

Veelvoorkomende problemen

• Het doorschot verschijnt niet. De property begrenst zijn eigen bereik. Dekking kan niet boven 1 en de meeste kleurkanalen kunnen niet buiten hun gamut, dus het doorschot wordt stil afgevlakt. Schiet door op transform, want die heeft geen grenzen.
• De animatie is ongeldig en er beweegt niets. Een x buiten 0 tot 1 maakt de hele cubic-bezier() ongeldig, en een ongeldige timingfunctie neemt de declaratie mee. De editor kan er geen maken; met de hand bewerken wel.
• Ease-in voelt verkeerd bij dingen die het scherm binnenkomen. Dat is meestal ook zo. Ease-out voor dingen die aankomen, ease-in voor dingen die weggaan, ease-in-out voor dingen die tussen twee plekken op het scherm bewegen. Een element dat versnelt terwijl het verschijnt leest als aarzelend.
• Het ziet er goed uit op 300ms en beroerd op 1200ms. Easing en duur zijn één beslissing. Een uitgesproken curve heeft een korte duur nodig, anders wordt het trage stuk een stilstand, en daarom zet de demo hierboven de duur vast en laat hij alleen de curve variëren.

Veelgestelde vragen

Welke curve moet ik standaard gebruiken?

cubic-bezier(0.4, 0, 0.2, 1), de standaardcurve van Material, is een goede standaard voor beweging in een interface: hij vertrekt snel en komt langzaam tot rust, en dat leest als vlot zonder abrupt te ogen. Het CSS-trefwoord ease komt in de buurt maar legt minder gewicht vooraan, en ease-in-out is symmetrisch, en daarom voelt symmetrische beweging vaak mechanisch.

Waarom laat de editor me buiten het vak slepen?

Omdat dat gebied geldig en nuttig is. Het vlak toont voortgang van -0,4 tot 1,4 en tekent het vak van 0 tot 1 achter de curve, zodat een doorschot zichtbaar is in plaats van afgeknipt. Alleen de horizontale as stopt bij de randen, en dat is de grens uit de spec zelf.

Kan ik dit zonder muis gebruiken?

Ja. Beide handgrepen zijn echte knoppen: tab ernaartoe en verplaats ze met de pijltoetsen, met shift voor een tien keer grotere stap. De vier getalvakken nemen waarden aan die de handgrepen niet kunnen halen, en dat telt bij een groot doorschot.

En steps() en de jump-termen?

steps(n, jump-start | jump-end | jump-both | jump-none) is een heel andere familie: het maakt de voortgang schokkerig in plaats van vloeiend, en zo worden animaties met een spritesheet en typemachine-effecten gebouwd. Het is niet als Bezier uit te drukken, en het is niet wat deze editor maakt.