Gustav Morving
Morving Curve er et gratis, browserbaseret værktøj til at designe, forhåndsvise og eksportere brugerdefinerede Bézier-kurver til brug i CSS-transitions, JavaScript-animationer, GSAP-timelines og meget mere. Ingen login, ingen installation - åbn værktøjet og begynd at forme dine easing-funktioner med det samme.
En easing-kurve (også kaldet en timing-funktion) styrer, hvordan en animeret værdi ændrer sig over tid. I stedet for en lineær, mekanisk bevægelse giver easing-kurver dig mulighed for at definere acceleration, deceleration, overshoot, bounce eller spring-effekter - og giver dit interface den flydende, naturlige fornemmelse, man finder i produkter af høj kvalitet. Den underliggende matematik er en Bézier-spline: du styrer placeringen af ankerpunkter og tangenthandtag, og kurveenginen beregner outputværdien på ethvert givet tidspunkt i animationen.
For enkelt-segment-kurver genererer Morving Curve en klar-til-indsætning cubic-bezier(x1, y1, x2, y2)-værdi, du kan sætte direkte ind i enhver CSS transition- eller animation-timing-function-egenskab. Det er det samme format, der bruges af browserens DevTools, Chromes cubic-bezier-visualizer og værktøjer som Easings.net.
Arbejder du med GSAP, Anime.js, Framer Motion eller Web Animations API? Morving Curve eksporterer JavaScript-klar easing-kode, der er kompatibel med alle større animationsbiblioteker. For komplekse fler-segment-splines - kurver der går ud over, hvad én cubic-bezier kan udtrykke - genereres en look-up table (LUT) samplefunktion, du kan indsætte direkte i dit projekt. Tænk på det som et let, gratis alternativ til GSAPs CustomEase-plugin.
I modsætning til de fleste cubic-bezier-editorer, der kun understøtter to kontrolpunkter, kan du i Morving Curve tilføje så mange ankerpunkter, du har brug for. Skift til Tilføj-tilstand og klik et sted langs kurven for at indsætte et nyt punkt - splinen opdeles rent ved hjælp af de Casteljaus algoritme, så kontinuiteten bevares. Det gør det muligt at skabe komplekse spring-lignende eller flerfasede easing-kurver, der er umulige at udtrykke med én enkelt cubic-bezier.
Enhver kurve kan eksporteres i fire formater: CSS (cubic-bezier til transitions og keyframes), JS/GSAP (easing-streng + Web Animations API-snippet), LUT (et 32-samples float-array med samplefunktion til spilmotorer, WebGL eller brugerdefinerede renderere) og JSON (fulde nodedata inkl. ankre, tangenthandtag og LUT - nyttigt til serialisering af kurver mellem værktøjer eller opbevaring i et design system).
Morving Curve blev oprindeligt bygget som et internt værktøj på et spiludviklingsstudie for at hjælpe animatorer med at generere easing-funktioner til real-time UI uden at skulle skrive kode. Den live animationsforhåndsvisning - som viser flytning, skalering, rotation og gennemsigtighed samtidigt - lader dig mærke kurven, inden du sender den i produktion. Gemte kurver opbevares lokalt i din browser, så dit bibliotek altid er tilgængeligt fra session til session.
Lavet af Gustav Morving
Jeg er en kreativ teknolog der bygger skræddersyet web, interaktivt og 3D-arbejde: designstærke hjemmesider, real-time UI, animationssystemer og AI-automatisering. Skal du sende noget der ikke bare skal virke, men føles rigtigt, så lad os tage en snak.