Cubic-bezier-editor

Sådan bruger du cubic-bezier-editoren

1. Træk i de to håndtag på grafen. P1 (det første kontrolpunkt) former begyndelsen af bevægelsen, P2 slutningen. Tiden går fra venstre mod højre og forløbet fra bund til top.
2. Eller skriv en værdi i cubic-bezier()-værdi: en hel cubic-bezier(0.4, 0, 0.2, 1), fire tal eller et nøgleord som ease-in-out. Felterne x1, y1, x2 og y2 redigerer én koordinat ad gangen.
3. Start med menuen Forudindstillinger (CSS-nøgleord, familierne fra sine til back og Material Design-kurver) eller nøgleordsknapperne. Når din kurve svarer til en forudindstilling, vises dens navn ved siden af knapperne.
4. Se Eksempel på animation: prikken på Din kurve og prikken på linear tilbagelægger den samme afstand på den samme Varighed. Brug Pause/Afspil og Start forfra til at sammenligne dem.
5. Kopiér resultatet fra CSS-timingfunktion, eller kopiér Tilnærmelse med linear() og vælg antallet af Segmenter.

Tastatur: giv et håndtag fokus, og brug piletasterne til at flytte det 0,01, eller 0,1 med Shift.

Hvis dit system er sat til at reducere bevægelse, starter animationen på pause. Tryk på Afspil, hvis du vil køre den alligevel.

Alt foregår i din browser. Intet, du indtaster, sendes til en server.

Hvad cubic-bezier() betyder

En CSS-easingfunktion afbilder en overgangs forløbne tid (0 til 1) på dens fremdrift (0 til 1). cubic-bezier(x1, y1, x2, y2) beskriver denne afbildning med en kubisk Bézier-kurve, der starter i (0, 0), slutter i (1, 1) og trækkes af to kontrolpunkter, P1 = (x1, y1) og P2 = (x2, y2).

• x-værdier er tider og skal holde sig mellem 0 og 1, ellers ville funktionen ikke være en gyldig timingkurve. Editoren holder dem inden for intervallet.
• y-værdier er fremdrift og kan komme under 0 eller over 1. Et y over 1 får animationen til at skyde over målet og vende tilbage, som Back-kurverne gør. Under 0 bevæger den sig først baglæns.
• En stejl hældning betyder hurtig bevægelse, en flad hældning langsom bevægelse. ease-out starter hurtigt og slutter langsomt, hvilket føles naturligt for elementer, der kommer ind på skærmen. ease-in gør det modsatte og passer til elementer, der forlader den.

CSS-nøgleordene er genveje: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) og linear = (0, 0, 1, 1).

Tilnærmelsen med linear()

Den nyere funktion linear() angiver fremdriftsværdier på jævnt fordelte tidspunkter, for eksempel linear(0, 0.25, 0.5, 0.75, 1), og forbinder dem med rette linjer. Værktøjet sampler din kurve (det løser Bézier-kurven for hvert tidstrin) og skriver værdierne med tre decimaler. Med 20 til 40 segmenter er resultatet visuelt identisk med kurven. Den egentlige fordel ved linear() er kurver, som en Bézier-kurve ikke kan tegne, som hop og fjedre, men den lader dig også dele én syntaks. Den virker i Chrome og Edge 113+, Firefox 112+ og Safari 17.2+, så behold cubic-bezier()-værdien som reserve.