📈

Bepul CSS Cubic-Bezier Silliqlash Generatori

Boshqaruv nuqtalarini sudrab CSS silliqlash egri chiziqlarini loyihalang, harakatni jonli oldindan ko'ring va cubic-bezier() qiymatini nusxalang. Ortiqcha siljish/sakrash tayyor variantlarini o'z ichiga oladi.

Brauzeringizda ishlaydiRo'yxatdan o'tish, pop-uplar yo'qKirish talab etilmaydiAbadiy bepul

Yuklangandan keyin oflayn ishlaydi

Egri chiziqni shakllantirish uchun binafsha va yashil tutqichlarni torting

Nazorat nuqtalari

x1y1x2y2

Harakat ko'rinishi

Davomiyligi1.6s

Kenglik o'tishi

CSS qiymati

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

Tayyor sozlamalar

Yashil va binafsha tutqichlar qutidan yuqoriga yoki pastga (Y 0-1 dan tashqarida) siljib, back-out va anticipate kabi 'ortiqcha siljish' / sakrash effektlarini yaratishi mumkin. X esa 0-1 oralig'ida qoladi (vaqt teskari yo'nalishda o'tolmaydi).

Qanday ishlaydi

Muharrir to'liq brauzerda React state va SVG yordamida qurilgan — egri chiziq matematikasini hech qanday kutubxona boshqarmaydi. Ikkita sudralaydigan boshqaruv nuqtasi SVG kub Bezye yo'lini belgilaydi, brauzerning o'z CSS animatsiya dvigateli esa natijaviy cubic-bezier() qiymatini @keyframes qoidasiga to'g'ridan-to'g'ri kiritish orqali harakat ko'rib chiqishini ishga tushiradi.

1
Boshqaruv nuqtalarini sudrang yoki yozing
Ikkita tutqich (yashil rangdagi P1, atirgul rangdagi P2) SVG kanvasda joylashgan. Sudrash setPointerCapture bilan Pointer Events API'sidan foydalanadi, shunda tutqich barmog'ingiz yoki kursoringizni SVG chegarasidan tashqarida ham kuzatadi. Tutqichlarni strelka tugmalari bilan ham siljitishingiz yoki x1/y1/x2/y2 raqam kirishlariga aniq qiymatlarni yozishingiz mumkin.
2
SVG egri chiziqni real vaqtda chizadi
Egri chiziq — yagona SVG <path> elementi bo'lib, uning C (kub Bezye) buyrug'i har bir state yangilanishida to'rtta boshqaruv nuqtasi koordinatalaridan qayta hisoblanadi. Kanvas yo'q, tashqi kutubxona yo'q — brauzerning SVG ko'rsatuvchisi yo'lni to'g'ridan-to'g'ri chizadi.
3
Brauzer CSS dvigateli silliqlashni ko'rib chiqadi
Uchta jonli animatsiya (suriluvchi nuqta, kenglik o'tishi va masshtab) inline kiritilgan cubic-bezier() qiymati bilan CSS @keyframes'ni ishga tushiradi. Brauzerning o'z animatsiya dvigateli egri chiziqni talqin qiladi, shuning uchun ko'rgan narsangiz ishlab chiqarish CSS'ingiz aynan nima ishlab chiqarishi bilan bir xil.
4
Bo'lakni frameworkingiz sintaksisida nusxalang
Yorliqlar xuddi shu to'rtta raqamni CSS transition-timing-function, Tailwind ixtiyoriy-qiymat sinfi, Framer Motion silliqlash massivi yoki anime.js silliqlash satri sifatida formatlaydi. Bo'lak navigator.clipboard bilan buferga yoziladi. Egri chiziq shuningdek URL heshida (#b=x1,y1,x2,y2) kodlangan, shuning uchun uni ulashishingiz yoki xatchubga qo'shishingiz mumkin.