CSS Cubic Bezier جنریٹر
ایزنگ کرو بنانے کے لیے دونوں ہینڈلز کو ڈریگ کریں، ایک متحرک نقطے کو مستقل رفتار کے مقابلے میں دیکھیں، اور cubic-bezier() ویلیو کاپی کریں۔
cubic-bezier(0.25, 0.1, 0.25, 1)منحنی خط (curve) براہ راست آپ کے براؤزر میں تیار کیا جاتا ہے۔ آپ کی سیٹ کی ہوئی کوئی بھی چیز BroBroGo پر اپ لوڈ نہیں کی جاتی۔
عمومی سوالات
دونوں ہینڈلز اور چار نمبروں کا کیا مطلب ہے؟
منحنی خط (curve) نیچے بائیں (شروع) سے اوپر دائیں (آخر) تک چلتا ہے، جس میں وقت بائیں سے دائیں اور پیشرفت اوپر کی طرف جاتی ہے۔ دونوں ہینڈلز کنٹرول پوائنٹس ہیں جو اسے موڑتے ہیں — ہر ایک کا ایک X اور ایک Y ہوتا ہے، اس لیے مل کر وہ cubic-bezier(x1, y1, x2, y2) بنتے ہیں۔ X ہمیشہ 0 اور 1 کے درمیان رہتا ہے، جبکہ Y حرکت کو اوور شوٹ کرنے یا ٹھہرنے سے پہلے پیچھے کھینچنے کے لیے اوپر یا نیچے جا سکتا ہے۔
میں اپنے CSS میں اس ویلیو کو کیسے استعمال کروں؟
cubic-bezier() کو کاپی کریں اور اسے وہاں رکھیں جہاں ٹائمنگ فنکشن استعمال ہوتا ہے — transition-timing-function، animation-timing-function، یا شارٹ ہینڈ، جیسے transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)۔ کلیدی الفاظ ease، ease-in، ease-out اور ease-in-out صرف فکسڈ cubic-bezier منحنی خطوط ہیں، لہذا ان میں سے کسی ایک پری سیٹ کو منتخب کرنے سے آپ کو کلیدی لفظ کے پیچھے کی اصل ویلیو نظر آتی ہے۔
کیا یہ باؤنس یا لچکدار (elastic) اثر بنا سکتا ہے؟
صرف اپنے طور پر نہیں۔ ایک واحد cubic-bezier پیش گوئی اور اوور شوٹ کر سکتا ہے — "back" پری سیٹس بالکل یہی کرنے کے لیے ایک ہینڈل کو باکس سے آگے کھینچتے ہیں — لیکن یہ صرف ایک طرف حرکت کر سکتا ہے اور پھر ٹھہر سکتا ہے۔ باؤنس اور لچکدار اثرات کئی بار سمت بدلتے ہیں، جسے کوئی ایک cubic-bezier ظاہر نہیں کر سکتا؛ ان کے لیے CSS کی فریمز یا کئی اسٹاپس کے ساتھ linear() فنکشن کی ضرورت ہوتی ہے۔