Hogyan hozhatok létre egy egyéni CSS cubic-bezier könnyítési görbét?

Húzd a két vezérlőpont fogantyúját a grafikonon, írd be a pontos x1, y1, x2, y2 értékeket, vagy válassz egy előbeállítást. Ezután válaszd a CSS-t a Kimeneti formátum alatt, és kattints a Másolás gombra a cubic-bezier() érték megszerzéséhez a transition-timing-function számára.

Hogyan készíthetek pattanó vagy túllendülő effektust cubic-bezier-rel?

Húzz egy fogantyút a doboz fölé vagy alá, hogy az Y értéke túlmenjen a 0-1 tartományon. Az Y meghaladhatja ezt a tartományt, míg az X 0 és 1 között marad. A back-out és anticipate előbeállítások kész túllendülési kiindulópontok.

Megkaphatom a könnyítést Tailwind, Framer Motion vagy anime.js számára?

Igen. A kimeneti formátum fülek: CSS, Tailwind, Framer Motion és anime.js. Mind ugyanazt a négy számot formázzák, így válassz egy fület, és kattints a Másolás gombra a kódrészlet vágólapra helyezéséhez.

Hogyan tölthetek be egy meglévő cubic-bezier értéket a szerkesztéséhez?

Illessz be egy értéket, például cubic-bezier(.17, .67, .83, .67) az importáló mezőbe, és kattints a Betöltés gombra. Ha négy szám nem olvasható ki, hibaüzenetet kapsz. A görbe az oldal URL-jében is tárolódik a hash után, így megosztható.

Miért tűnik az előnézet lassabbnak, mint a valódi átmeneteim?

A Mozgáselőnézet egy általad módosítható Időtartam beállítást használ, és az alapértelmezések lassabbak, hogy tanulmányozhasd a görbét. Csökkentsd az Időtartam-ot, majd használd az Újrajátszás gombot, hogy a tervezett sebességgel lásd a mozgást.

Igen. Minden eszköz ingyenesen használható, fiók és bankkártya nélkül. A munka a szervereink helyett a te eszközödön fut, ezért maradhat ingyenes a használata.

Igen. Az iOS és Android jelenlegi mobilböngészőiben fut, telepítés nélkül.

📈

Ingyenes CSS köbös-Bezier könnyítésgenerátor

Tervezz CSS könnyítési görbéket a vezérlőpontok húzásával, tekintsd meg élőben a mozgást, és másold a cubic-bezier() értéket. Túllendülés/ugrás előbeállításokat tartalmaz.

A böngésződben futNincs regisztráció, nincs felugró ablakNem szükséges bejelentkezésÖrökre ingyenes

Betöltés után offline is működik

Húzd a türkiz és rózsaszín fogantyúkat a görbe alakításához

Kontrollpontok

x1y1x2y2

Mozgáselőnézet

Időtartam1,6 mp

Szélességátmenet

CSS-érték

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Előbeállítások

A rózsaszín és türkiz fogantyúk húzhatók a doboz fölé vagy alá (Y: 0-1-en kívül) a back-out és anticipate-szerű „túllendülés"/pattanás effektek létrehozásához. X 0-1 között marad (az idő nem mehet vissza).

Gyakori felhasználások

Egyéni CSS átmenet könnyítésTervezze meg az érzelmi lezárásjellegeket a lebegtet-effektusokhoz, menükhez és felhasználói felületi átmenetek.
Bounce és Overshoot AnimationsHozzon létre játékos rugó/ugrálási mozgást a vezérlőpontok húzásával a doboz mellett.
Könnyítés @keyframes animációkhozVálassza a helyes animation-timing-function értékét CSS keyframe animációkhoz.
Könnyítési értékek a JS animációs könyvtárakhozSzerezzen cubic-bezier értékeket a GSAP, Framer Motion, anime.js és egyéb számára.
Értse meg, hogyan működik a könnyítésLásd a kapcsolatot a bezier görbe és az általa előidézett mozgás között.

Hogyan működik

A szerkesztő teljesen a böngészőben épült React állapottal és SVG-vel — egyetlen könyvtár sem kezeli a görbematematikát. Két húzható vezérlőpont definiál egy SVG köbös Bézier-útvonalat, és a böngésző saját CSS animációmotorja futtatja a mozgás-előnézetet, közvetlenül a kapott cubic-bezier() értéket injektálva egy @keyframes szabályba.

1
Húzza vagy gépelje be a vezérlőpontokat
Két fogantyú (P1 türkiz, P2 rózsaszín) helyezkedik el egy SVG platnon. A húzás a Pointer Events API-t használja setPointerCapture-vel, így a fogantyú követi ujját vagy kurzorát még az SVG határán kívül is. A fogantyúkat nyílbillentyűkkel is mozdíthatja, vagy pontos értékeket gépelhet be az x1/y1/x2/y2 számbemenetekbe.
2
Az SVG valós időben rajzolja a görbét
A görbe egyetlen SVG <path> elem, amelynek C (köbös Bézier) parancsa minden állapotfrissítéskor újraszámításra kerül a négy vezérlőpont-koordinátából. Nincs canvas, nincs külső könyvtár — a böngésző SVG renderelője közvetlenül rajzolja az útvonalat.
3
A böngésző CSS-motorja előnézetezi a lassítást
Három élő animáció (egy csúszó pont, egy szélesség-átmenet és egy skálázás) CSS @keyframes-t futtat a cubic-bezier() értékkel inline injektálva. A böngésző saját animációmotorja értelmezi a görbét, így amit lát, az pontosan az, amit a produkciós CSS-e előállít.
4
Másolja a részletet a keretrendszere szintaxisában
A fülek ugyanazt a négy számot formázzák CSS transition-timing-function-ként, Tailwind tetszőleges-érték osztályként, Framer Motion ease tömbként, vagy anime.js lassítási karakterláncként. A részlet a vágólapra kerül a navigator.clipboard-dal. A görbe az URL hash-be is kódolásra kerül (#b=x1,y1,x2,y2), így megoszthatja vagy könyvjelzőzheti.