CSS ٹرانزیشنز اور اینیمیشنز میں ٹائمنگ فنکشنز کا کردار
CSS ٹرانزیشنز اور اینیمیشنز ویب ڈیزائن میں عناصر کی حرکت کو حقیقت پسندانہ بنانے کے لیے استعمال ہوتی ہیں۔ جب کوئی عنصر ایک حالت سے دوسری حالت میں تبدیل ہوتا ہے، تو اس تبدیلی کی رفتار کو کنٹرول کرنے کے لیے ٹائمنگ فنکشنز (timing functions) کا استعمال کیا جاتا ہے۔ یہ فنکشنز طے کرتے ہیں کہ وقت کے ساتھ ساتھ اینیمیشن کی رفتار کب تیز ہوگی اور کب دھیمی۔
CSS میں ٹائمنگ فنکشنز کو عام طور پر transition-timing-function اور animation-timing-function کی خصوصیات کے ساتھ لاگو کیا جاتا ہے۔ ان خصوصیات میں پہلے سے طے شدہ کلیدی الفاظ جیسے ease، ease-in، ease-out اور ease-in-out استعمال کیے جا سکتے ہیں، لیکن اپنی مرضی کے مطابق مخصوص رفتار حاصل کرنے کے لیے cubic-bezier() فنکشن کا استعمال کیا جاتا ہے۔
ریاضیاتی تصور اور کنٹرول پوائنٹس کا کردار
ایک cubic Bezier منحنی خط (curve) ریاضیاتی طور پر چار پوائنٹس پر مشتمل ہوتا ہے جو اینیمیشن کی رفتار اور پیشرفت کو کنٹرول کرتے ہیں۔ یہ منحنی خط نیچے بائیں (شروع) سے اوپر دائیں (آخر) تک چلتا ہے۔ اس گراف میں وقت بائیں سے دائیں جانب بڑھتا ہے، اور اینیمیشن کی پیشرفت نیچے سے اوپر کی طرف جاتی ہے۔
اس منحنی خط کی شکل کو کنٹرول کرنے کے لیے دو ہینڈلز (کنٹرول پوائنٹس) استعمال کیے جاتے ہیں۔ ان کنٹرول پوائنٹس کو ریاضیاتی طور پر درج ذیل چار متغیرات سے ظاہر کیا جاتا ہے:
- پہلا کنٹرول پوائنٹ (x1, y1): یہ پہلا ہینڈل ہے جو اینیمیشن کے ابتدائی حصے کی رفتار کو متاثر کرتا ہے۔
- دوسرا کنٹرول پوائنٹ (x2, y2): یہ دوسرا ہینڈل ہے جو اینیمیشن کے آخری حصے کی رفتار کو کنٹرول کرتا ہے۔
ان چاروں ویلیوز کو ملا کر cubic-bezier(x1, y1, x2, y2) کی شکل میں لکھا جاتا ہے، جو اینیمیشن کی رفتار کے اتار چڑھاؤ کو واضح کرتا ہے۔
ٹول کے ان پٹس اور آؤٹ پٹس
CSS Cubic Bezier جنریٹر ایک بصری ٹول ہے جو آپ کو اپنی مرضی کے مطابق ایزنگ کرو (easing curve) بنانے کی سہولت دیتا ہے۔ اس ٹول میں درج ذیل ان پٹس اور آؤٹ پٹس شامل ہیں:
ان پٹس (Inputs)
- دونوں ہینڈلز کو ڈریگ کرنا: آپ بصری طور پر منحنی خط کی شکل کو تبدیل کرنے کے لیے دونوں ہینڈلز کو ماؤس کی مدد سے ڈریگ کر سکتے ہیں۔
- پہلا کنٹرول پوائنٹ X: ایک عددی ویلیو جو 0 اور 1 کے درمیان ہونی چاہیے۔
- پہلا کنٹرول پوائنٹ Y: ایک عددی ویلیو جو -0.70 اور 1.70 کے درمیان ہونی چاہیے۔
- دوسرا کنٹرول پوائنٹ X: ایک عددی ویلیو جو 0 اور 1 کے درمیان ہونی چاہیے۔
- دوسرا کنٹرول پوائنٹ Y: ایک عددی ویلیو جو -0.70 اور 1.70 کے درمیان ہونی چاہیے۔
- پری سیٹ کا انتخاب: آپ پہلے سے موجود آپشنز جیسے "ease"، "ease-in"، "ease-out"، "ease-in-out"، "Back In"، "Back Out"، یا "Back In-Out" میں سے کسی ایک کا انتخاب کر سکتے ہیں۔
آؤٹ پٹس (Outputs)
- آپ کا کرو: یہ آپ کے تیار کردہ ایزنگ کرو کی بصری شکل کو ظاہر کرتا ہے۔
- cubic-bezier(x1, y1, x2, y2): یہ آپ کے تیار کردہ منحنی خط کی اصل CSS ویلیو ہے جسے آپ کاپی کر کے اپنے کوڈ میں استعمال کر سکتے ہیں۔
- Copied: جب آپ کامیابی سے ویلیو کاپی کر لیتے ہیں، تو یہ اسٹیٹس ظاہر ہوتا ہے۔
جب آپ ہینڈلز کو ایڈجسٹ کرتے ہیں، تو گراف پر ایک متحرک نقطہ حرکت کرتا ہے جو ایزنگ کے اثر کو ظاہر کرتا ہے۔ اس کے ساتھ ہی ایک دوسرا نقطہ مستقل (لکیری) رفتار سے چلتا ہے تاکہ آپ دونوں کی رفتار کا موازنہ کر سکیں۔
قوانین اور ان پٹ کی حدود
ٹول کو درست طریقے سے استعمال کرنے کے لیے درج ذیل قوانین اور حدود کو ذہن میں رکھنا ضروری ہے:
- X ویلیوز کی حد: کنٹرول پوائنٹس کے لیے X کی ویلیو ہمیشہ 0 اور 1 کے درمیان ہونی چاہیے۔ یہ وقت کی نمائندگی کرتی ہے، اور وقت پیچھے کی طرف نہیں جا سکتا۔
- Y ویلیوز کی حد: کنٹرول پوائنٹس کے لیے Y کی ویلیو -0.70 اور 1.70 کے درمیان ہو سکتی ہے۔ چونکہ Y پیشرفت کو ظاہر کرتا ہے، اس لیے یہ حد سے باہر جا کر اوور شوٹ (overshoot) یا پل بیک (pull-back) اثرات پیدا کر سکتا ہے۔
- خودکار تصحیح: اگر آپ "پہلا کنٹرول پوائنٹ X" کے فیلڈ میں
9جیسی غلط ویلیو لکھیں گے اور فیلڈ سے فوکس ہٹائیں گے، تو ٹول خود بخود اسے درست کر کے زیادہ سے زیادہ حد یعنی1پر سیٹ کر دے گا۔ - خالی فیلڈز کی بحالی: اگر آپ کسی عددی ان پٹ فیلڈ کو مکمل طور پر خالی کر کے فوکس ہٹائیں گے، تو ٹول پرانی درست ویلیو کو دوبارہ بحال کر دے گا۔ خالی یا غیر عددی ان پٹس کی صورت میں ٹول مکمل اور درست ویلیو درج ہونے کا انتظار کرتا ہے۔
- کی بورڈ کنٹرول: جب کوئی کنٹرول پوائنٹ ہینڈل فوکس میں ہو، تو کی بورڈ کی Left ایرو کی (arrow key) دبانے سے اس کی ویلیو تبدیل ہو جاتی ہے، مثال کے طور پر
0.99ہو جاتی ہے۔ - کاپی کا عمل: ویلیو کاپی کرنے پر صرف کامیابی کا اسٹیٹس ظاہر ہوتا ہے، کسی قسم کی ناکامی یا مسترد ہونے کا پیغام نہیں دکھایا جاتا۔
اوور شوٹ اور پل بیک اثرات بنانا
عام اینیمیشنز کے برعکس، جہاں حرکت شروع سے ختم ہونے تک ایک ہی سمت میں رہتی ہے، آپ cubic-bezier() کے ذریعے اینیمیشن میں "انتظار" (anticipation) اور "اوور شوٹ" (overshoot) کے اثرات پیدا کر سکتے ہیں۔
جب آپ Y کی ویلیو کو 0 سے نیچے (مثلاً منفی میں) لے جاتے ہیں، تو عنصر حرکت شروع کرنے سے پہلے تھوڑا پیچھے کی طرف کھنچتا ہے، جسے پل بیک یا اینٹیسیپیشن کہا جاتا ہے۔ اسی طرح، جب Y کی ویلیو کو 1 سے اوپر لے جایا جاتا ہے، تو عنصر اپنی آخری پوزیشن سے آگے نکل جاتا ہے اور پھر واپس اپنی اصل جگہ پر آ کر رکتا ہے، جسے اوور شوٹ کہا جاتا ہے۔
مثال کے طور پر، جب آپ "Back Out" پری سیٹ منتخب کرتے ہیں، تو ٹول اس کی ویلیو کو cubic-bezier(0.34, 1.56, 0.64, 1) پر سیٹ کر دیتا ہے۔ اس میں 1.56 کی ویلیو واضح کرتی ہے کہ عنصر اپنی آخری حد سے آگے نکل کر واپس آئے گا۔
سنگل کیوبک بیزیئر کی حدود
اگرچہ cubic-bezier() انتہائی طاقتور ہے، لیکن ایک واحد منحنی خط کی اپنی حدود ہوتی ہیں۔ ایک سنگل cubic-bezier فنکشن اینیمیشن کے آغاز میں پیچھے ہٹنے (anticipate) اور آخر میں آگے نکلنے (overshoot) کا اثر تو پیدا کر سکتا ہے، لیکن یہ صرف ایک ہی سمت میں حرکت کر کے رک سکتا ہے۔
یہ فنکشن ایسے اثرات پیدا نہیں کر سکتا جو بار بار اپنی سمت تبدیل کرتے ہوں، جیسے کہ گیند کا زمین پر گر کر بار بار ٹپکنا (bounce) یا لچکدار طریقے سے آگے پیچھے ہلنا (elastic)۔ اس قسم کے پیچیدہ اثرات کے لیے ایک سے زیادہ اسٹاپس والے CSS کی فریمز (keyframes) یا linear() ٹائمنگ فنکشن کی ضرورت ہوتی ہے۔
پرائیویسی اور ڈیٹا پروسیسنگ
اس ٹول میں پرائیویسی کا خاص خیال رکھا گیا ہے۔ آپ کا تیار کردہ منحنی خط (curve) براہ راست آپ کے براؤزر میں تیار کیا جاتا ہے۔ آپ کی سیٹ کی ہوئی کوئی بھی چیز یا ڈیٹا BroBroGo پر اپ لوڈ نہیں کیا جاتا، جس کا مطلب ہے کہ تمام پروسیسنگ مقامی طور پر آپ کے اپنے کمپیوٹر پر ہوتی ہے۔
اکثر پوچھے جانے والے سوالات (FAQ)
دونوں ہینڈلز اور چار نمبروں کا کیا مطلب ہے؟
منحنی خط (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() فنکشن کی ضرورت ہوتی ہے۔