📈

وړیا د CSS Cubic-Bezier اسانتیا تولیدونکی

د کنترول نقطو کش کولو سره CSS اسانتیا منحنۍ ډیزاین کړئ، حرکت ژوندی مخکتنه کړئ، او د cubic-bezier() ارزښت کاپي کړئ. د اضافي حرکت/ټوپ تنظیمات شامل دي.

ستاسو په براوزر کې چلیږيهیڅ ثبت نوم، هیڅ پاپ-اپ نشتهننوتل اړین نه ديد تل لپاره وړیا

یو ځل چې لوډ شي آفلاین کار کوي

د منحنۍ بڼه ورکولو لپاره تیل او ګلابي دستکونه کش کړئ

کنټرول ټکي

x1y1x2y2

د حرکت مخکتنه

موده1.6s

د پلنوالي انتقال

CSS ارزښت

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

مخکینۍ ترتیبات

ګلابي او تیل دستکونه کولی شي بکس نه پورته یا ټیټ ورشي (Y له 0-1 نه بهر) چې د 'overshoot' / bounce اغیزې لکه back-out او anticipate جوړې کړي. X د 0-1 دننه پاتې کیږي (وخت شاته نشي تلی).

دا څنګه کار کوي

ایډیټر بشپړ براوزر کې د React حالت او SVG سره جوړ شوی — هیڅ کتابتون کروی ریاضي اداره نه کوي. دوه کش‌شونکي کنټرول ټکي یو SVG مکعب Bezier لار تعریفوي، او براوزر خپل CSS انیمیشن انجن حرکت مخکتنه چلوي د پایله cubic-bezier() ارزښت مستقیم یوه @keyframes قاعدې ته ننویستلو سره.

1
کنټرول ټکي کش کړئ یا ولیکئ
دوه لاسي (P1 تیل‌رنګ کې، P2 ګلابي کې) یوه SVG کینوس باندې ناست دي. کشول د Pointer Events API د setPointerCapture سره کاروي نو لاسی ستاسو ګوته یا کرسر تعقیبوي حتی د SVG پولې نه بهر. تاسو کولی شئ لاسي د زاویي کیلیو سره هم ولیږئ یا دقیق ارزښتونه x1/y1/x2/y2 عددي ننوتنو کې ولیکئ.
2
SVG کروی ریښتینې وخت کې رسموي
کروی یو واحد SVG <path> عنصر دی چې د هغه C (مکعب Bezier) کمانډ له څلورو کنټرول-ټکي همغږیو نه هر حالت تازه کولو کې بیا محاسبه کیږي. هیڅ کینوس، هیڅ بهرنی کتابتون — براوزر SVG رینډرر مستقیم لار رسموي.
3
براوزر CSS انجن اسانتیا مخکتنه کوي
درې ژوندۍ انیمیشنونه (یو کشونکی ټکی، یو پلنوالی انتقال، او یوه کچه) CSS @keyframes چلوي د cubic-bezier() ارزښت ان‌لاین ننویستل شوي سره. براوزر خپل انیمیشن انجن کروی تفسیر کوي، نو هغه څه چې تاسو یې وینئ دقیقاً هغه دي چې ستاسو تولید CSS به یې جوړ کړي.
4
ټوټه ستاسو چوکاټ نحوی کې کاپي کړئ
ټبونه همغه څلور عددونه د یوه CSS transition-timing-function، یوه Tailwind دلخواه-ارزښت کلاس، یوه Framer Motion ease صف، یا یوه anime.js اسانتیا متن په توګه فارمیټ کوي. ټوټه navigator.clipboard سره کلیپبورډ ته لیکل کیږي. کروی هم URL هش کې کوډ کیږي (#b=x1,y1,x2,y2) نو تاسو یې شریکولی یا بوکمارک کولی شئ.