میں CSS کے لیے اپنی مرضی کا کیوبک بیزیئر ایزنگ کرو کیسے بناؤں؟

گراف پر دو کنٹرول پوائنٹ ہینڈلز کو گھسیٹیں، درست x1، y1، x2، y2 اقدار ٹائپ کریں، یا کوئی پری سیٹ منتخب کریں۔ پھر آؤٹ پٹ فارمیٹ کے تحت CSS منتخب کریں اور transition-timing-function کے لیے cubic-bezier() قدر حاصل کرنے کے لیے کاپی کریں پر کلک کریں۔

میں کیوبک بیزیئر کے ساتھ باؤنس یا اوور شوٹ ایفیکٹ کیسے بناؤں؟

ایک ہینڈل کو باکس کے اوپر یا نیچے گھسیٹیں تاکہ اس کی Y قدر 0-1 سے آگے جائے۔ Y اس حد سے تجاوز کر سکتا ہے، جبکہ X 0 اور 1 کے درمیان رہتا ہے۔ بیک آؤٹ اور اینٹیسیپیٹ پری سیٹس تیار شدہ اوور شوٹ شروعاتی نکات ہیں۔

کیا میں Tailwind، Framer Motion یا anime.js کے لیے ایزنگ حاصل کر سکتا ہوں؟

جی ہاں۔ آؤٹ پٹ فارمیٹ کے ٹیبز CSS، Tailwind، Framer Motion اور anime.js ہیں۔ یہ سب ایک جیسی چار نمبروں کو فارمیٹ کرتے ہیں، لہٰذا ایک ٹیب منتخب کریں اور اسنیپٹ کو اپنے کلپ بورڈ پر رکھنے کے لیے کاپی کریں پر کلک کریں۔

میں ترمیم کے لیے موجودہ کیوبک بیزیئر قدر کیسے لوڈ کروں؟

امپورٹ باکس میں ایک قدر جیسے cubic-bezier(.17, .67, .83, .67) پیسٹ کریں اور لوڈ پر کلک کریں۔ اگر چار نمبر نہیں پڑھے جا سکتے تو آپ کو ایک خرابی کا پیغام ملے گا۔ کرو صفحے کے URL میں ہیش کے بعد بھی محفوظ ہوتی ہے، لہٰذا اسے شیئر کیا جا سکتا ہے۔

پیش نظارہ میری حقیقی ٹرانزیشنز سے سست کیوں محسوس ہوتا ہے؟

حرکت پیش نظارہ ایک مدد کی ترتیب استعمال کرتا ہے جسے آپ تبدیل کر سکتے ہیں، اور ڈیفالٹس سست ہیں تاکہ آپ کرو کا مطالعہ کر سکیں۔ مدد کو مختصر کریں، پھر اس رفتار پر حرکت دیکھنے کے لیے دوبارہ چلائیں استعمال کریں جس پر آپ اسے شپ کرنے کا ارادہ رکھتے ہیں۔

کیا یہ واقعی مفت ہے؟

جی ہاں۔ ہر ٹول مفت استعمال کے لیے ہے، بغیر اکاؤنٹ اور بغیر کریڈٹ کارڈ کے۔ کام ہمارے سرورز کی بجائے آپ کے آلے پر چلتا ہے، جو اسے چلانے میں مفت رکھتا ہے۔

کیا یہ موبائل پر کام کرتا ہے؟

جی ہاں۔ یہ iOS اور Android کے موجودہ موبائل براؤزرز میں چلتا ہے، کچھ انسٹال کرنے کی ضرورت نہیں۔

📈

مفت CSS Cubic-Bezier Easing جنریٹر

کنٹرول پوائنٹس گھسیٹ کر CSS easing curves ڈیزائن کریں، motion کا لائیو پریویو کریں، اور cubic-bezier() ویلیو کاپی کریں۔ overshoot/bounce presets شامل ہیں۔

آپ کے براؤزر میں چلتا ہےسائن اپ نہیں، پاپ اپ نہیںلاگ ان کی ضرورت نہیںہمیشہ کے لیے مفت

لوڈ ہونے کے بعد آف لائن کام کرتا ہے

منحنی کی شکل بدلنے کے لیے فیروزی اور گلابی ہینڈل گھسیٹیں

کنٹرول پوائنٹس

x1y1x2y2

حرکت پیش نظارہ

مدت1.6 سیکنڈ

چوڑائی ٹرانزیشن

CSS قدر

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

پری سیٹس

گلابی اور فیروزی ہینڈل باکس کے اوپر یا نیچے جا سکتے ہیں (Y 0-1 سے باہر) تاکہ back-out اور anticipate جیسے overshoot / اچھال اثرات بنائے جا سکیں۔ X، 0-1 کے اندر رہتا ہے (وقت پیچھے نہیں جا سکتا)۔

عام استعمالات

حسب ضرورت CSS Transition آسانیhover اثرات، مینو، اور UI منتقلیوں کے لیے قدرتی سے محسوس ہونے والی آسانی ڈیزائن کریں۔
Bounce اور Overshoot Animationsکنٹرول پوائنٹس کو باکس سے باہر کھینچ کر دلپسند spring/bounce motion بنائیں۔
@keyframes Animations کے لیے آسانیCSS keyframe animations کے لیے صحیح animation-timing-function منتخب کریں۔
JS Animation لائبریریوں کے لیے آسانی ValuesGSAP، Framer Motion، anime.js، اور بہت کچھ کے لیے cubic-bezier values حاصل کریں۔
سمجھیں کہ آسانی کیسے کام کرتی ہےایک bezier curve اور اس کی پیدا کردہ motion کے درمیان تعلق دیکھیں۔

یہ کیسے کام کرتا ہے

ایڈیٹر مکمل طور پر براؤزر میں React state اور SVG سے بنا ہے — کرو کا حساب کوئی لائبریری نہیں کرتی۔ دو گھسیٹنے کے قابل کنٹرول پوائنٹس SVG cubic Bezier راستہ طے کرتے ہیں، اور براؤزر کا اپنا CSS اینیمیشن انجن نتیجے والی cubic-bezier() قدر کو براہ راست @keyframes قاعدے میں ڈال کر حرکت کا پیش منظر چلاتا ہے۔

1
کنٹرول پوائنٹس گھسیٹیں یا ٹائپ کریں
دو ہینڈل (P1 فیروزی، P2 گلابی) SVG کینوس پر ہیں۔ گھسیٹنا Pointer Events API اور setPointerCapture استعمال کرتا ہے تاکہ ہینڈل SVG حد سے باہر بھی آپ کی انگلی یا کرسر کے ساتھ چلے۔ آپ ایرو کیز سے بھی ہینڈل ہلا سکتے ہیں یا x1/y1/x2/y2 نمبر ان پٹس میں بالکل درست قدریں ٹائپ کر سکتے ہیں۔
2
SVG حقیقی وقت میں کرو بناتا ہے
کرو ایک واحد SVG <path> عنصر ہے جس کی C (cubic Bezier) کمانڈ ہر state اپ ڈیٹ پر چاروں کنٹرول پوائنٹ نقاط سے دوبارہ نکالی جاتی ہے۔ نہ canvas، نہ بیرونی لائبریری — براؤزر کا SVG رینڈرر براہ راست راستہ بناتا ہے۔
3
براؤزر کا CSS انجن easing کا پیش منظر دکھاتا ہے
تین لائیو اینیمیشنز (کھسکتا نقطہ، چوڑائی کی تبدیلی اور پیمانہ) inline cubic-bezier() قدر کے ساتھ CSS @keyframes چلاتی ہیں۔ براؤزر کا اپنا اینیمیشن انجن کرو کی تشریح کرتا ہے، اس لیے جو آپ دیکھتے ہیں وہی آپ کی پروڈکشن CSS بنائے گی۔
4
اپنے فریم ورک کے نحو میں ٹکڑا کاپی کریں
ٹیبز انہی چار نمبروں کو CSS transition-timing-function، Tailwind arbitrary-value کلاس، Framer Motion ease array یا anime.js easing اسٹرنگ کے طور پر فارمیٹ کرتی ہیں۔ ٹکڑا navigator.clipboard سے کلپ بورڈ پر لکھا جاتا ہے۔ کرو URL hash (#b=x1,y1,x2,y2) میں بھی درج ہوتی ہے تاکہ آپ اسے شیئر یا بک مارک کر سکیں۔

مفت CSS Cubic-Bezier Easing جنریٹر

عام استعمالات

یہ کیسے کام کرتا ہے

متعلقہ ٹولز

آڈیو فیڈ اِن/آؤٹ

سب ٹائٹل ایڈیٹر

CSS گرڈ جنریٹر

اکثر پوچھے جانے والے سوالات