📈

دروستکەری هێواشبوونی Cubic-Bezierی CSSی بەخۆڕایی

چڵکی هێواشبوونی CSS دیزاین بکە بە ڕاکێشانی خاڵی کۆنترۆڵ، جوڵانەوەکە بە کاتی ڕاستەقینەدا پێشبینین بکە، و بەهای cubic-bezier() کۆپی بکە. پێشوەختی زیادڕۆیی/سەکۆ لەخۆدەگرێت.

لە وێبگەڕەکەتدا کاردەکاتبێ خۆتۆمارکردن، بێ پۆپئەپپێویستی بە چوونەژوورەوە نییەڕایگان بۆ هەمیشە

بەبێ ئینتەرنێت کاردەکات دوای بارکردن

دەستەکانی تیل و ڕۆز ڕاکێشە بۆ شێوەدانی کەوانەکە

خاڵە کۆنترۆڵەکان

x1y1x2y2

پێشبینینی جووڵە

ماوە1.6s

گواستنەوەی پانی

نرخی CSS

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

پێشدانراوەکان

دەستەکانی ڕۆز و تیل دەتوانن لە سەرەوە یان خوارەوەی سندوقەکە ڕابکێشرێن (Y دەرەوەی 0-1) بۆ دروستکردنی کاریگەری 'overshoot' / تەکان وەک back-out و anticipate. X لەناو 0-1 دەمێنێتەوە (کات ناتوانێت بگەڕێتەوە دواوە).

چۆن کار دەکات

دەستکاریکەر تەواو لە وێبگەڕدا بنیاتنراوە بە بەکارهێنانی دۆخی React و SVG — هیچ کتێبخانەیەک ژمێریاری کێوەکە بەڕێوەناباتہ. دوو خاڵی کۆنترۆڵی ڕاکێشراو ڕێگایەکی Bezierی سێبار SVG پێناسە دەکەن، و ئەنجینی خودی گواستنەوەی CSSی وێبگەڕ پێشبینینی جووڵانەکە بەڕێوەدەبات بە تێخستنی نرخی cubic-bezier()ی ئەنجام ڕاستەوخۆ لە ڕستەیەکی @keyframesدا.

1
خاڵی کۆنترۆڵ ڕاکێشە یان بنووسە
دوو دەستەگیرە (P1 بە تیل، P2 بە ڕۆز) لەسەر خشتەبەری SVGیەک دادەنرێن. ڕاکێشان APIی Pointer Events بەکاردێنێت لەگەڵ setPointerCapture بۆیە دەستەگیرەکە پەنجە یان نیشانەرت شوێن دەکەوێت تەنانەت لە دەرەوەی سنووری SVGیشدا. هەروەها دەتوانیت دەستەگیرەکان بە کلیلی تیر بجووڵێنیت یان نرخی وردت بنووسیت لەناو داخڵی ژمارەیی x1/y1/x2/y2دا.
2
SVG کێوەکە بە کاتی ڕاستەقینەدا دەکێشێت
کێوەکە توخمێکی تاکی <path>ی SVGـە کە فەرمانی C (Bezierی سێبار) ـی هەر لەسەر هەموو نوێکردنەوەی دۆخێک دووبارە ژمێردەکرێتەوە لە چوار هاوکاتی خاڵی کۆنترۆڵەوە. هیچ canvas، هیچ کتێبخانەی دەرەکی — ئەنجینی SVGی وێبگەڕ ڕاستەوخۆ ڕێگاکە دەکێشێت.
3
ئەنجینی CSSی وێبگەڕ هێواشکردنەوەکە پێشبینین دەکات
سێ ئەنیمەیشنی زیندوو (خاڵێکی خلیسکاو، گواستنەوەیەکی پان، و پیواندنێک) @keyframesی CSS بەکاردێنن لەگەڵ نرخی cubic-bezier()ی تێخراو ناوخۆیی. ئەنجینی خودی ئەنیمەیشنی وێبگەڕ کێوەکە شیدەکاتەوە، بۆیە ئەوەی دەیبینیت ڕاستەوخۆ ئەوەیە کە CSSی بەرهەمهێنانت دەری دەهێنێت.
4
پارچەکەیش بگۆڕە بۆ دەقنووسینی چوارچێوەکەت
تابەکان هەمان چوار ژمارە فۆرمات دەکەن وەک transition-timing-functionی CSS، کلاسی نرخی-ئازادی Tailwind، ڕیزبەندی هێواشکردنەوەی Framer Motion، یان دەقنووسینی هێواشکردنەوەی anime.js. پارچەکە بۆ کلیپبۆرد دەنووسرێت بە navigator.clipboard. کێوەکەیش لە هاشی URLدا کۆددەکرێت (#b=x1,y1,x2,y2) بۆیە دەتوانیت هاوبەشی بکەیت یان نیشانەی بکەیت.