اس کی تصویر بنائیں: آپ ایک نئے پروجیکٹ میں شامل ہوتے ہیں، کوڈبیس میں غوطہ لگاتے ہیں، اور پہلے چند گھنٹوں کے اندر، آپ کو مایوس کن طور پر مانوس چیز دریافت ہوتی ہے۔ تمام اسٹائل شیٹس میں بکھرے ہوئے، آپ کو ایک ہی بنیادی اینیمیشنز کے لیے متعدد @keyframes تعریفیں ملتی ہیں۔ تین مختلف فیڈ ان ایفیکٹس، دو یا تین سلائیڈ ویری ایشنز، مٹھی بھر زوم اینیمیشنز، اور کم از کم دو مختلف اسپن اینیمیشنز کیونکہ، ٹھیک ہے، کیوں نہیں؟ @keyframes نبض { سے { پیمانہ: 1؛ } کو { پیمانہ: 1.1؛ } }
@keyframes بڑی نبض { 0%، 20%، 100% { پیمانہ: 1؛ } 10%، 40% { پیمانہ: 1.2؛ } }
اگر یہ منظر نامہ واقف لگتا ہے، تو آپ اکیلے نہیں ہیں۔ مختلف پروجیکٹس میں میرے تجربے میں، میں جو سب سے زیادہ مسلسل جیت سکتا ہوں وہ کلیدی فریموں کو مضبوط اور معیاری بنانا ہے۔ یہ ایک ایسا قابل اعتماد نمونہ بن گیا ہے کہ اب میں کسی بھی نئے کوڈ بیس پر اپنے پہلے کاموں میں سے ایک کے طور پر اس صفائی کا منتظر ہوں۔ افراتفری کے پیچھے منطق جب آپ اس کے بارے میں سوچتے ہیں تو یہ فالتو پن کامل معنی رکھتا ہے۔ ہم سب اپنے روزمرہ کے کام میں ایک جیسی بنیادی اینیمیشنز استعمال کرتے ہیں: دھندلا پن، سلائیڈز، زوم، گھماؤ، اور دیگر عام اثرات۔ یہ اینیمیشنز کافی سیدھی ہیں، اور کام مکمل کرنے کے لیے فوری @keyframes تعریف کو تیار کرنا آسان ہے۔ سنٹرلائزڈ اینیمیشن سسٹم کے بغیر، ڈویلپرز فطری طور پر یہ کلیدی فریم شروع سے لکھتے ہیں، اس بات سے بے خبر کہ اسی طرح کی اینیمیشنز پہلے سے کوڈ بیس میں کہیں اور موجود ہیں۔ یہ خاص طور پر عام ہے جب اجزاء پر مبنی آرکیٹیکچرز میں کام کرتے ہیں (جو ہم میں سے اکثر آج کل کرتے ہیں)، کیونکہ ٹیمیں اکثر ایپلی کیشن کے مختلف حصوں میں متوازی طور پر کام کرتی ہیں۔ نتیجہ؟ حرکت پذیری افراتفری۔ چھوٹا مسئلہ کلیدی فریمز کی نقل کے ساتھ سب سے واضح مسائل ترقیاتی وقت کا ضیاع اور غیر ضروری کوڈ بلوٹ ہیں۔ ایک سے زیادہ کلیدی فریم کی تعریفوں کا مطلب ہے کہ جب تقاضے تبدیل ہوتے ہیں تو اپ ڈیٹ کرنے کے لیے متعدد جگہیں۔ اپنی دھندلی حرکت پذیری کے وقت کو ایڈجسٹ کرنے کی ضرورت ہے؟ آپ کو اپنے کوڈ بیس میں ہر مثال کو تلاش کرنے کی ضرورت ہوگی۔ آسان افعال کو معیاری بنانا چاہتے ہیں؟ تمام تغیرات تلاش کرنے میں گڈ لک۔ دیکھ بھال کے پوائنٹس کی یہ ضرب سادہ اینیمیشن اپڈیٹس کو بھی وقت طلب کام بناتی ہے۔ بڑا مسئلہ یہ کلیدی فریم ڈپلیکیشن سطح کے نیچے چھپا ہوا ایک بہت زیادہ کپٹی مسئلہ پیدا کرتا ہے: عالمی دائرہ کار کا جال۔ یہاں تک کہ جب اجزاء پر مبنی فن تعمیر کے ساتھ کام کرتے ہیں، CSS کی فریم ہمیشہ عالمی دائرہ کار میں بیان کیے جاتے ہیں۔ اس کا مطلب ہے کہ تمام کلیدی فریم تمام اجزاء پر لاگو ہوتے ہیں۔ ہمیشہ جی ہاں، آپ کی اینیمیشن ضروری نہیں کہ وہ کلیدی فریم استعمال کرے جو آپ نے اپنے جزو میں بیان کیے ہیں۔ یہ آخری کلیدی فریموں کا استعمال کرتا ہے جو بالکل اسی نام سے ملتا ہے جو عالمی دائرہ کار میں لوڈ کیے گئے تھے۔ جب تک آپ کے تمام کلیدی فریم ایک جیسے ہیں، یہ ایک معمولی مسئلہ لگتا ہے۔ لیکن جس لمحے آپ کسی مخصوص استعمال کے معاملے کے لیے اینیمیشن کو اپنی مرضی کے مطابق بنانا چاہتے ہیں، آپ پریشانی میں ہوں گے، یا اس سے بھی بدتر، آپ ہی ان کا سبب بنیں گے۔ یا تو آپ کی اینیمیشن کام نہیں کرے گی کیونکہ آپ کے بعد کوئی دوسرا جزو لوڈ ہوتا ہے، آپ کے کی فریمز کو اوور رائٹ کرتا ہے، یا آپ کا جزو آخری بار لوڈ ہوتا ہے اور اتفاقی طور پر اس کلیدی فریم کے نام کا استعمال کرتے ہوئے ہر دوسرے جزو کے لیے حرکت پذیری کے رویے کو تبدیل کر دیتا ہے، اور ہو سکتا ہے آپ کو اس کا احساس تک نہ ہو۔ یہاں ایک سادہ سی مثال ہے جو مسئلہ کو ظاہر کرتی ہے: .component-one { /* اجزاء کی طرزیں */ حرکت پذیری: نبض 1s ease-in-out infinite alternate; }
/* یہ @keyframes تعریف کام نہیں کرے گی */ @keyframes نبض { سے { پیمانہ: 1؛ } کو { پیمانہ: 1.1؛ } }
/* بعد میں کوڈ میں... */
.component-2 { /* اجزاء کی طرزیں */ حرکت پذیری: نبض 1s آسانی سے باہر لامحدود؛ }
/* یہ کلیدی فریم دونوں اجزاء پر لاگو ہوں گے */ @keyframes نبض { 0%، 20%، 100% { پیمانہ: 1؛ } 10%، 40% { پیمانہ: 1.2؛ } }
دونوں اجزاء ایک ہی اینیمیشن کا نام استعمال کرتے ہیں، لیکن دوسری @keyframes تعریف پہلی کو اوور رائٹ کرتی ہے۔ اب component-1 اور component-2 دونوں دوسرے کلیدی فریموں کا استعمال کریں گے، قطع نظر اس کے کہ کون سا جزو کون سے کلیدی فریموں کی وضاحت کرتا ہے۔ پین کی فریمز ٹوکنز دیکھیں - ڈیمو 1 امیت شین کے ذریعہ [فورکڈ]۔ سب سے برا حصہ؟ یہ اکثر مقامی ترقی میں بالکل کام کرتا ہے لیکن پراسرار طریقے سے پیداوار میں ٹوٹ جاتا ہے جب تعمیراتی عمل آپ کی اسٹائل شیٹس کے لوڈنگ آرڈر کو تبدیل کرتا ہے۔ آپ انیمیشنز کے ساتھ ختم ہوتے ہیں جو مختلف طریقے سے برتاؤ کرتے ہیں اس پر منحصر ہے کہ کون سے اجزاء لوڈ کیے گئے ہیں اور کس ترتیب میں۔ حل: یونیفائیڈ کی فریمز اس افراتفری کا جواب حیرت انگیز طور پر آسان ہے: مشترکہ اسٹائل شیٹ میں پہلے سے طے شدہ ڈائنامک کی فریمز۔ ہر جزو کو اس کی اپنی اینیمیشنز کی وضاحت کرنے دینے کے بجائے، ہم مرکزی کلیدی فریم بناتے ہیں جو اچھی طرح سے دستاویزی، آسانآپ کے پروجیکٹ کی مخصوص ضروریات کے مطابق استعمال، برقرار رکھنے کے قابل اور موزوں۔ اسے کلیدی فریم ٹوکن سمجھیں۔ جس طرح ہم رنگوں اور اسپیسنگ کے لیے ٹوکن استعمال کرتے ہیں، اور ہم میں سے بہت سے لوگ پہلے سے ہی اینی میشن خصوصیات کے لیے ٹوکن استعمال کرتے ہیں، جیسے دورانیہ اور آسان فنکشنز، کیوں نہ کی فریمز کے لیے بھی ٹوکن استعمال کریں؟ یہ نقطہ نظر قدرتی طور پر کسی بھی موجودہ ڈیزائن ٹوکن ورک فلو کے ساتھ ضم ہو سکتا ہے جسے آپ استعمال کر رہے ہیں، جبکہ چھوٹے مسئلے (کوڈ ڈپلیکیشن) اور بڑے مسئلے (عالمی دائرہ کار کے تنازعات) دونوں کو ایک ہی بار میں حل کر سکتے ہیں۔ خیال سیدھا ہے: ہماری تمام مشترکہ اینیمیشنز کے لیے سچائی کا ایک واحد ذریعہ بنائیں۔ اس مشترکہ اسٹائل شیٹ میں احتیاط سے تیار کیے گئے کلیدی فریموں پر مشتمل ہے جو انیمیشن پیٹرن کا احاطہ کرتا ہے جو ہمارا پروجیکٹ اصل میں استعمال کرتا ہے۔ مزید یہ اندازہ لگانے کی ضرورت نہیں ہے کہ آیا ہمارے کوڈبیس میں کہیں دھندلا اینیمیشن پہلے سے موجود ہے۔ اب حادثاتی طور پر دوسرے اجزاء سے متحرک تصاویر کو اوور رائٹ کرنے کی ضرورت نہیں ہے۔ لیکن یہاں کلید ہے: یہ صرف جامد کاپی پیسٹ متحرک تصاویر نہیں ہیں۔ انہیں CSS حسب ضرورت خصوصیات کے ذریعے متحرک اور حسب ضرورت بننے کے لیے ڈیزائن کیا گیا ہے، جس سے ہمیں مستقل مزاجی کو برقرار رکھنے کی اجازت ملتی ہے جبکہ مخصوص استعمال کے معاملات میں اینیمیشنز کو ڈھالنے کی لچک ہوتی ہے، جیسے کہ اگر آپ کو ایک جگہ پر قدرے بڑی "پلس" اینیمیشن کی ضرورت ہو۔ پہلا کی فریم ٹوکن بنانا سب سے پہلے کم لٹکنے والے پھلوں میں سے ایک جس سے ہمیں نمٹنا چاہئے وہ ہے "فیڈ ان" اینیمیشن۔ اپنے حالیہ پروجیکٹس میں سے ایک میں، مجھے ایک درجن سے زیادہ الگ الگ دھندلا پن کی تعریفیں ملیں، اور ہاں، ان سب نے صرف 0 سے 1 تک دھندلاپن کو متحرک کیا۔ لہذا، آئیے ایک نئی اسٹائل شیٹ بنائیں، اسے kf-tokens.css کہتے ہیں، اسے اپنے پروجیکٹ میں درآمد کریں، اور اس کے اندر مناسب تبصروں کے ساتھ اپنے کلیدی فریموں کو رکھیں۔ /* keyframes-tokens.css */
/* * فیڈ ان - فیڈ انٹرنس اینیمیشن * استعمال: حرکت پذیری: kf-fade-in 0.3s ease-out; */ @keyframes kf-fade-in { سے { دھندلاپن: 0؛ } کو { دھندلاپن: 1؛ } }
یہ واحد @keyframes اعلامیہ ہمارے کوڈبیس میں ان تمام بکھرے ہوئے فیڈ ان اینیمیشنز کی جگہ لے لیتا ہے۔ صاف، سادہ، اور عالمی سطح پر قابل اطلاق۔ اور اب جب کہ ہمارے پاس اس ٹوکن کی وضاحت ہے، ہم اسے اپنے پورے پروجیکٹ میں کسی بھی جزو سے استعمال کر سکتے ہیں: .modal { اینیمیشن: kf-fade-in 0.3s ease-out; }
.tooltip { اینیمیشن: kf-fade-in 0.2s ease-in-out; }
اطلاع { اینیمیشن: kf-fade-in 0.5s ease-out; }
امیت شین کے ذریعے قلم کی فریمز ٹوکنز - ڈیمو 2 [فورکڈ] دیکھیں۔ نوٹ: ہم اپنے تمام @keyframes ناموں میں kf- سابقہ استعمال کر رہے ہیں۔ یہ سابقہ نام کی جگہ کے طور پر کام کرتا ہے جو پراجیکٹ میں موجودہ اینیمیشنز کے ساتھ ناموں کے تنازعات کو روکتا ہے اور یہ فوری طور پر واضح کرتا ہے کہ یہ کی فریمز ہماری کی فریمز ٹوکن فائل سے آتے ہیں۔ ایک متحرک سلائیڈ بنانا kf-fade-in keyframes بہت اچھا کام کرتے ہیں کیونکہ یہ آسان ہے اور چیزوں کو گڑبڑ کرنے کی بہت کم گنجائش ہے۔ دیگر اینیمیشنز میں، تاہم، ہمیں بہت زیادہ متحرک ہونے کی ضرورت ہے، اور یہاں ہم CSS حسب ضرورت خصوصیات کی زبردست طاقت کا فائدہ اٹھا سکتے ہیں۔ یہ وہ جگہ ہے جہاں بکھرے ہوئے جامد متحرک تصاویر کے مقابلے کی فریمز ٹوکن واقعی چمکتے ہیں۔ آئیے ایک عام منظر نامہ لیتے ہیں: "سلائیڈ ان" متحرک تصاویر۔ لیکن کہاں سے سلائیڈ؟ دائیں سے 100px؟ 50% بائیں سے؟ کیا اسے اسکرین کے اوپری حصے سے داخل ہونا چاہیے؟ یا شاید نیچے سے تیرنا؟ بہت سارے امکانات، لیکن ہر سمت اور ہر تغیر کے لیے الگ الگ کلیدی فریم بنانے کے بجائے، ہم ایک لچکدار ٹوکن بنا سکتے ہیں جو تمام منظرناموں کے مطابق ہو: /* * سلائیڈ ان - دشاتمک سلائیڈ اینیمیشن * سمت کو کنٹرول کرنے کے لیے --kf-slide-from استعمال کریں۔ * پہلے سے طے شدہ: بائیں سے سلائیڈز (-100%) *استعمال: * حرکت پذیری: kf-slide-in 0.3s آسانی سے باہر؛ * --kf-slide-from: -100px 0; // بائیں سے سلائیڈ * --kf-slide-from: 100px 0; // دائیں سے سلائیڈ * --kf-slide-from: 0 -50px؛ // اوپر سے سلائیڈ */
@keyframes kf-slide-in { سے { ترجمہ: var(--kf-slide-from, -100% 0); } کو { ترجمہ: 0 0; } }
اب ہم اس واحد @keyframes ٹوکن کو کسی بھی سلائیڈ سمت کے لیے صرف --kf-slide-from کسٹم پراپرٹی کو تبدیل کر کے استعمال کر سکتے ہیں۔ سائڈبار { اینیمیشن: kf-slide-in 0.3s آسانی سے آؤٹ؛ /* پہلے سے طے شدہ قدر استعمال کرتا ہے: بائیں سے سلائیڈیں */ }
اطلاع { اینیمیشن: kf-slide-in 0.4s آسانی سے آؤٹ؛ --kf-slide-from: 0 -50px؛ /* اوپر سے سلائیڈ*/ }
.modal { حرکت پذیری: kf-fade-in 0.5s، kf-slide-in 0.5s کیوبک-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 50px 50px؛ /* نیچے دائیں سے سلائیڈ*/ }
مستقل مزاجی کو برقرار رکھتے ہوئے یہ نقطہ نظر ہمیں ناقابل یقین لچک دیتا ہے۔ ایک کلیدی فریم کا اعلان، لامحدود امکانات۔ امیت شین کے قلم کی فریم ٹوکنز - ڈیمو 3 [فورکڈ] دیکھیں۔ اور اگر ہم اپنی اینیمیشنز کو اور بھی زیادہ لچکدار بنانا چاہتے ہیں، اس کے ساتھ ساتھ "سلائیڈ آؤٹ" اثرات کی اجازت دیتے ہوئے، ہم کر سکتے ہیںحسب ضرورت پراپرٹی میں صرف --kf-slide-کا اضافہ کریں، جیسا کہ ہم اگلے حصے میں دیکھیں گے۔ دو طرفہ زوم کی فریمز ایک اور عام حرکت پذیری جو تمام پروجیکٹس میں ڈپلیکیٹ ہوتی ہے وہ ہے "زوم" اثرات۔ چاہے یہ ٹوسٹ پیغامات کے لیے ایک لطیف اسکیل اپ ہو، ماڈلز کے لیے ڈرامائی زوم ان، یا ہیڈنگز کے لیے نرم اسکیل ڈاؤن اثر، زوم اینیمیشنز ہر جگہ موجود ہیں۔ ہر اسکیل ویلیو کے لیے علیحدہ کی فریم بنانے کے بجائے، آئیے kf-zoom کی فریمز کا ایک لچکدار سیٹ بنائیں:
/* * زوم - اسکیل اینیمیشن * پیمانے کی قدروں کو کنٹرول کرنے کے لیے --kf-zoom-from اور --kf-zoom-to کا استعمال کریں۔ * ڈیفالٹ: 80% سے 100% تک زوم (0.8 سے 1) *استعمال: * حرکت پذیری: kf-zoom 0.2s آسانی سے آؤٹ؛ * --kf-zoom-from: 0.5؛ --kf-zoom-to: 1; // 50% سے 100% تک زوم کریں * --kf-zoom-from: 1؛ --kf-zoom-to: 0; // 100% سے 0% تک زوم * --kf-zoom-from: 1؛ --kf-zoom-to: 1.1؛ // 100% سے 110% تک زوم کریں */
@keyframes kf-zoom { سے { پیمانہ: var(-kf-zoom-from, 0.8); } کو { پیمانہ: var(--kf-zoom-to, 1); } }
ایک تعریف کے ساتھ، ہم کسی بھی زوم تغیر کو حاصل کر سکتے ہیں جس کی ہمیں ضرورت ہے: ٹوسٹ { حرکت پذیری: kf-slide-in 0.2s، kf-zoom 0.4s آسانی سے آؤٹ؛ --kf-slide-from: 0 100%; /* اوپر سے سلائیڈ*/ /* ڈیفالٹ زوم کا استعمال کرتا ہے: 80% سے 100% تک کے پیمانے */ }
.modal { حرکت پذیری: kf-zoom 0.3s کیوبک-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0؛ /* ڈرامائی زوم 0% سے 100% تک */ }
.heading { حرکت پذیری: kf-fade-in 2s، kf-zoom 2s آسانی سے --kf-zoom-from: 1.2؛ --kf-zoom-to: 0.8؛ /* نرم پیمانہ نیچے */ }
0.8 (80%) کا ڈیفالٹ زیادہ تر UI عناصر کے لیے بالکل کام کرتا ہے، جیسے ٹوسٹ میسجز اور کارڈز، جب کہ اب بھی خصوصی معاملات کے لیے حسب ضرورت بنانا آسان ہے۔ امیت شین کے ذریعے قلم کی فریمز ٹوکنز - ڈیمو 4 [فورکڈ] دیکھیں۔ آپ نے حالیہ مثالوں میں کچھ دلچسپ محسوس کیا ہوگا: ہم متحرک تصاویر کو یکجا کر رہے ہیں۔ @keyframes ٹوکنز کے ساتھ کام کرنے کا ایک اہم فائدہ یہ ہے کہ وہ بغیر کسی رکاوٹ کے ایک دوسرے کے ساتھ مربوط ہونے کے لیے بنائے گئے ہیں۔ یہ ہموار ترکیب جان بوجھ کر ہے، حادثاتی نہیں۔ ہم بعد میں مزید تفصیل سے اینیمیشن کمپوزیشن پر تبادلہ خیال کریں گے، بشمول یہ کہ وہ کہاں پریشانی کا باعث بن سکتے ہیں، لیکن زیادہ تر مجموعے سیدھے اور لاگو کرنے میں آسان ہیں۔ نوٹ: اس مضمون کو لکھتے ہوئے، اور شاید اسے لکھنے کی وجہ سے، میں نے خود کو داخلی اینیمیشن کے پورے خیال پر دوبارہ غور کرتے ہوئے پایا۔ CSS میں تمام حالیہ پیشرفت کے ساتھ، کیا ہمیں اب بھی ان کی ضرورت ہے؟ خوش قسمتی سے، ایڈم آرگیل نے انہی سوالات کی کھوج کی اور اپنے بلاگ میں ان کا شاندار اظہار کیا۔ یہ یہاں لکھی گئی باتوں سے متصادم نہیں ہے، لیکن یہ قابل غور نقطہ نظر پیش کرتا ہے، خاص طور پر اگر آپ کے پروجیکٹس داخلی اینیمیشنز پر بہت زیادہ انحصار کرتے ہیں۔ مسلسل متحرک تصاویر جب کہ داخلی اینیمیشنز، جیسے "دھندلا"، "سلائیڈ"، اور "زوم" ایک بار ہوتی ہیں اور پھر رک جاتی ہیں، مسلسل متحرک تصاویر توجہ مبذول کرنے یا جاری سرگرمی کی نشاندہی کرنے کے لیے غیر معینہ مدت تک لوٹ جاتی ہیں۔ دو سب سے عام مسلسل متحرک تصاویر جن کا مجھے سامنا ہوتا ہے وہ ہیں "اسپن" (انڈیکیٹرز لوڈ کرنے کے لیے) اور "پلس" (اہم عناصر کو نمایاں کرنے کے لیے)۔ جب کلیدی فریم ٹوکن بنانے کی بات آتی ہے تو یہ اینیمیشنز منفرد چیلنج پیش کرتے ہیں۔ داخلی اینیمیشنز کے برعکس جو عام طور پر ایک ریاست سے دوسری حالت میں جاتی ہیں، مسلسل متحرک تصاویر کو ان کے طرز عمل میں انتہائی حسب ضرورت ہونے کی ضرورت ہے۔ سپن ڈاکٹر ایسا لگتا ہے کہ ہر پروجیکٹ متعدد اسپن متحرک تصاویر استعمال کرتا ہے۔ کچھ گھڑی کی سمت میں گھومتے ہیں، کچھ مخالف گھڑی کی سمت۔ کچھ ایک ہی 360 ڈگری گردش کرتے ہیں، دوسرے تیز اثر کے لیے متعدد موڑ کرتے ہیں۔ ہر تغیر کے لیے علیحدہ کلیدی فریم بنانے کے بجائے، آئیے ایک لچکدار اسپن بنائیں جو تمام منظرناموں کو سنبھالے:
/* * اسپن - گردش حرکت پذیری۔ گردش کی حد کو کنٹرول کرنے کے لیے --kf-spin-from اور --kf-spin-to استعمال کریں۔ گردش کی مقدار کو کنٹرول کرنے کے لیے --kf-spin-turns استعمال کریں۔ * ڈیفالٹ: 0deg سے 360deg تک گھومتا ہے (1 مکمل گردش) *استعمال: * حرکت پذیری: kf-spin 1s لکیری لامحدود؛ * --kf-spin-turns: 2; // 2 مکمل گردشیں * --kf-spin-from: 0deg؛ --kf-spin-to: 180deg؛ // نصف گردش * --kf-spin-from: 0deg؛ --kf-spin-to: -360deg؛ // مخالف گھڑی کی سمت */
@keyframes kf-spin { سے { گھمائیں: var(-kf-spin-from, 0deg)؛ } کو { گھمائیں: calc(var(-kf-spin-from, 0deg) + var(-kf-spin-to, 360deg) * var(-kf-spin-turns, 1)); } }
اب ہم اپنی پسند کی کوئی بھی اسپن تغیر پیدا کر سکتے ہیں:
لوڈنگ اسپنر { اینیمیشن: kf-spin 1s لکیری لامحدود؛ /* ڈیفالٹ استعمال کرتا ہے: 0deg سے 360deg تک گھومتا ہے */ }
فاسٹ لوڈر { اینیمیشن: kf-spin 1.2s ease-in-out infinite alternate; --kf-spin-turns: 3؛ /* فی چکر ہر سمت کے لیے 3 مکمل گردشیں۔*/ }
.steped-reverse { اینیمیشن: kf-spin 1.5s قدم (8) لامحدود؛ --kf-spin-to: -360deg؛ /* گھڑی کے برعکس */ }
.subtle-wiggle { اینیمیشن: kf-spin 2s ease-in-out infinite alternate; --kf-spin-from: -16deg; --kf-spin-to: 32deg؛ /* 36 ڈگری ہلائیں: -18 ڈگری اور +18 ڈگری کے درمیان */ }
پین کی فریمز ٹوکنز دیکھیں - امیت شین کے ذریعہ ڈیمو 5 [فورکڈ]۔ اس نقطہ نظر کی خوبصورتی یہ ہے کہ وہی کی فریمز لوڈنگ اسپنرز، گھومنے والی شبیہیں، وِگل اثرات، اور یہاں تک کہ پیچیدہ ملٹی ٹرن اینیمیشنز کے لیے بھی کام کرتے ہیں۔ نبض کا تضاد نبض کی متحرک تصاویر زیادہ مشکل ہوتی ہیں کیونکہ وہ مختلف خصوصیات کو "پلس" کرسکتی ہیں۔ کچھ پیمانہ کو پلس کرتے ہیں، کچھ دھندلاپن کو پلس کرتے ہیں، اور کچھ نبض کے رنگ کی خصوصیات جیسے چمک یا سنترپتی۔ ہر پراپرٹی کے لیے الگ الگ کی فریم بنانے کے بجائے، ہم کی فریمز بنا سکتے ہیں جو کسی بھی CSS پراپرٹی کے ساتھ کام کرتے ہیں۔ پیمانے اور دھندلاپن کے اختیارات کے ساتھ پلس کی فریم کی ایک مثال یہ ہے:
/* * پلس - پلسنگ اینیمیشن * پیمانے کی حد کو کنٹرول کرنے کے لیے --kf-pulse-scale-from اور --kf-pulse-scale-to کا استعمال کریں * دھندلاپن کی حد کو کنٹرول کرنے کے لیے --kf-pulse-opacity-from اور --kf-pulse-opacity-to کا استعمال کریں * ڈیفالٹ: کوئی پلس نہیں (تمام قدریں 1) *استعمال: * حرکت پذیری: kf-pulse 2s ease-in-out infinite alternate; * --kf-پلس-اسکیل-سے: 0.95؛ --kf-pulse-scale-to: 1.05; // اسکیل پلس * --kf-pulse-opacity-from: 0.7; --kf-pulse-opacity-to: 1; // دھندلاپن پلس */
@keyframes kf-pulse { سے { پیمانہ: var(-kf-pulse-scale-from, 1); دھندلاپن: var(--kf-pulse-opacity-from, 1); } کو { پیمانہ: var(-kf-pulse-scale-to, 1); دھندلاپن: var(--kf-pulse-opacity-to, 1); } }
یہ ایک لچکدار نبض بناتا ہے جو متعدد خصوصیات کو متحرک کرسکتا ہے: کال ٹو ایکشن { اینیمیشن: kf-pulse 0.6s infinite alternate; --kf-pulse-opacity-from: 0.5; /* دھندلاپن نبض */ }
.notification-dot { اینیمیشن: kf-pulse 0.6s ease-in-out infinite alternate; --kf-pulse-scale-from: 0.9; --kf-pulse-scale-to: 1.1; /* اسکیل پلس */ }
متن کو نمایاں کریں { اینیمیشن: kf-pulse 1.5s ease-out infinite; --kf-pulse-scale-from: 0.8; --kf-pulse-opacity-from: 0.2; /* پیمانے اور دھندلاپن پلس */ }
امیت شین کے ذریعے قلم کی فریمز ٹوکنز - ڈیمو 6 [فورکڈ] دیکھیں۔ یہ سنگل kf-pulse keyframe باریک توجہ گرفت سے لے کر ڈرامائی جھلکیوں تک ہر چیز کو سنبھال سکتا ہے، جب کہ حسب ضرورت بنانا آسان ہے۔ اعلی درجے کی آسانی کی فریمز ٹوکنز کے استعمال کے بارے میں ایک بڑی بات یہ ہے کہ ہماری اینیمیشن لائبریری کو پھیلانا اور ایسے اثرات فراہم کرنا کتنا آسان ہے جسے زیادہ تر ڈویلپر شروع سے لکھنے کی زحمت نہیں کریں گے، جیسے لچکدار یا اچھال۔ یہاں ایک سادہ "باؤنس" کی فریمز ٹوکن کی ایک مثال ہے جو چھلانگ کی اونچائی کو کنٹرول کرنے کے لیے کسٹم پراپرٹی سے --kf-bounce- کا استعمال کرتا ہے۔ /* * اچھال - اچھالتا داخلہ اینیمیشن * چھلانگ کی اونچائی کو کنٹرول کرنے کے لیے --kf-bounce-from کا استعمال کریں۔ * ڈیفالٹ: 100vh سے چھلانگ (آف اسکرین) *استعمال: * حرکت پذیری: kf-bounce 3s ease-in; * --kf-bounce-from: 200px؛ // 200px اونچائی سے چھلانگ لگائیں۔ */
@keyframes kf-bounce { 0% { ترجمہ: 0 calc(var(-kf-bounce-from, 100vh) * -1); }
34% { ترجمہ: 0 calc(var(-kf-bounce-from, 100vh) * -0.4)؛ }
55% { ترجمہ: 0 calc(var(-kf-bounce-from, 100vh) * -0.2)؛ }
72% { ترجمہ: 0 calc(var(-kf-bounce-from, 100vh) * -0.1)؛ }
85% { ترجمہ: 0 calc(var(-kf-bounce-from, 100vh) * -0.05)؛ }
94% { ترجمہ: 0 calc(var(-kf-bounce-from, 100vh) * -0.025)؛ }
99% { ترجمہ: 0 calc(var(-kf-bounce-from, 100vh) * -0.0125)؛ }
22%، 45%، 64%، 79%، 90%، 97%، 100% { ترجمہ: 0 0; animation-time-function: ease-out; } }
کی فریمز کے اندر کیلکولیشنز کی وجہ سے "لچکدار" جیسی اینیمیشنز قدرے مشکل ہیں۔ ہمیں --kf-elastic-from-X اور --kf-elastic-from-Y کی الگ الگ تعریف کرنے کی ضرورت ہے (دونوں اختیاری ہیں)، اور وہ مل کر ہمیں سکرین پر کسی بھی مقام سے ایک لچکدار داخلہ بنانے دیتے ہیں۔
/* * لچکدار اندر - لچکدار داخلی اینیمیشن شروع کی پوزیشن کو کنٹرول کرنے کے لیے --kf-elastic-from-X اور --kf-elastic-from-Y کا استعمال کریں * پہلے سے طے شدہ: اوپر کے مرکز سے داخل ہوتا ہے (0, -100vh) *استعمال: * حرکت پذیری: kf-elastic-in 2s آسانی سے باہر دونوں؛ * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // درج کریں منجانب (-50px، -200px) */
@keyframes kf-elastic-in { 0% { ترجمہ: calc(var(-kf-elastic-from-X, -50vw) * 1) calc(var(-kf-elastic-from-Y, 0px) * 1); }
16% { ترجمہ: calc(var(-kf-elastic-from-X, -50vw) * -0.3227) calc(var(-kf-elastic-from-Y, 0px) * -0.3227)؛ }
28% { ترجمہ: calc(var(-kf-elastic-from-X, -50vw)* 0.1312)calc(var(-kf-elastic-from-Y, 0px) * 0.1312)؛ }
44% { ترجمہ: calc(var(-kf-elastic-from-X, -50vw) * -0.0463) calc(var(-kf-elastic-from-Y, 0px) * -0.0463)؛ }
59% { ترجمہ: calc(var(-kf-elastic-from-X, -50vw) * 0.0164) calc(var(-kf-elastic-from-Y, 0px) * 0.0164)؛ }
73% { ترجمہ: calc(var(-kf-elastic-from-X, -50vw) * -0.0058) calc(var(-kf-elastic-from-Y, 0px) * -0.0058)؛ }
88% { ترجمہ: calc(var(-kf-elastic-from-X, -50vw) * 0.0020) calc(var(-kf-elastic-from-Y, 0px) * 0.0020)؛ }
100% { ترجمہ: 0 0; } }
یہ نقطہ نظر صرف ایک حسب ضرورت خاصیت کو تبدیل کرکے، ہمارے پورے پروجیکٹ میں جدید کلیدی فریموں کو دوبارہ استعمال اور حسب ضرورت بنانا آسان بناتا ہے۔
.bounce-and-zoom { حرکت پذیری: kf-bounce 3s آسانی سے، kf-zoom 3s لکیری؛ --kf-zoom-from: 0؛ }
.bounce-and-slide { animation-composition: add; /* دونوں متحرک تصاویر ترجمہ کا استعمال کرتے ہیں */ حرکت پذیری: kf-bounce 3s آسانی سے، kf-slide-in 3s آسانی سے آؤٹ؛ --kf-slide-from: -200px؛ }
لچکدار میں { اینیمیشن: kf-elastic-in 2s آسانی سے باہر دونوں؛ }
امیت شین کے ذریعے قلم کی فریمز ٹوکنز - ڈیمو 7 [فورکڈ] دیکھیں۔ اس مقام تک، ہم نے دیکھا ہے کہ ہم کلیدی فریموں کو کس طرح سمارٹ اور موثر طریقے سے مضبوط کر سکتے ہیں۔ بلاشبہ، آپ اپنے پروجیکٹ کی ضروریات کو بہتر طور پر فٹ کرنے کے لیے چیزوں کو موافقت کرنا چاہیں گے، لیکن ہم نے کئی عام اینیمیشنز اور روزمرہ استعمال کے معاملات کی مثالوں کا احاطہ کیا ہے۔ اور ان کی فریمز ٹوکنز کے ساتھ، اب ہمارے پاس پورے پروجیکٹ میں مستقل، برقرار رکھنے کے قابل اینیمیشنز بنانے کے لیے طاقتور بلڈنگ بلاکس ہیں۔ مزید ڈپلیکیٹ کی فریمز نہیں، مزید عالمی دائرہ کار کے تنازعات نہیں۔ ہماری تمام حرکت پذیری کی ضروریات کو سنبھالنے کا صرف ایک صاف، آسان طریقہ۔ لیکن اصل سوال یہ ہے کہ: ہم ان عمارتوں کو ایک ساتھ کیسے بنائیں؟ یہ سب ایک ساتھ ڈالنا ہم نے دیکھا ہے کہ بنیادی کلیدی فریم ٹوکنز کو یکجا کرنا آسان ہے۔ ہمیں کسی خاص چیز کی ضرورت نہیں ہے لیکن پہلی اینیمیشن کی وضاحت کرنے کے لیے، دوسری کی وضاحت کرنے کے لیے، ضرورت کے مطابق متغیرات کو سیٹ کریں، اور بس۔ /* فیڈ ان + سلائیڈ ان */ ٹوسٹ { حرکت پذیری: kf-fade-in 0.4s، kf-slide-in 0.4s کیوبک-bezier(0.34, 1.56, 0.64, 1); --kf-slide-from: 0 40px؛ }
/* زوم ان + فیڈ ان */ .modal { حرکت پذیری: kf-fade-in 0.3s، kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0.7؛ --kf-zoom-to: 1; }
/* سلائیڈ ان + پلس */ اطلاع { حرکت پذیری: kf-slide-in 0.5s، kf-pulse 1.2s ease-in-out infinite alternate; --kf-slide-from: -100px 0; --kf-pulse-scale-from: 0.95; --kf-pulse-scale-to: 1.05; }
یہ امتزاج خوبصورتی سے کام کرتے ہیں کیونکہ ہر اینیمیشن ایک مختلف پراپرٹی کو نشانہ بناتی ہے: دھندلاپن، تبدیلی (ترجمہ/پیمانہ) وغیرہ۔ لیکن بعض اوقات تنازعات ہوتے ہیں، اور ہمیں یہ جاننے کی ضرورت ہوتی ہے کہ ان سے کیوں اور کیسے نمٹا جائے۔ جب دو اینیمیشنز ایک ہی خاصیت کو متحرک کرنے کی کوشش کرتے ہیں - مثال کے طور پر، دونوں اینیمیٹنگ اسکیل یا دونوں اینیمیٹنگ اوپیسٹی - نتیجہ وہ نہیں ہوگا جس کی آپ توقع کرتے ہیں۔ پہلے سے طے شدہ طور پر، صرف ایک اینیمیشن اصل میں اس پراپرٹی پر لاگو ہوتی ہے، جو اینیمیشن لسٹ میں آخری ہے۔ یہ ایک حد ہے کہ کس طرح CSS ایک ہی پراپرٹی پر متعدد اینیمیشنز کو ہینڈل کرتا ہے۔ مثال کے طور پر، یہ مقصد کے مطابق کام نہیں کرے گا کیونکہ صرف kf-pulse اینیمیشن لاگو ہوگی۔ .bad-combo { حرکت پذیری: kf-zoom 0.5s فارورڈز، kf-pulse 1.2s لامحدود متبادل؛ --kf-zoom-from: 0.5؛ --kf-zoom-to: 1.2؛ --kf-pulse-scale-from: 0.8; --kf-pulse-scale-to: 1.1; }
حرکت پذیری کا اضافہ ایک ہی خاصیت کو متاثر کرنے والے متعدد اینیمیشنز کو ہینڈل کرنے کا سب سے آسان اور سیدھا طریقہ اینیمیشن کمپوزیشن پراپرٹی کو استعمال کرنا ہے۔ اوپر کی آخری مثال میں، kf-pulse اینیمیشن kf-zoom اینیمیشن کی جگہ لے لیتی ہے، لہذا ہم ابتدائی زوم نہیں دیکھیں گے اور 1.2 کا متوقع پیمانہ حاصل نہیں کریں گے۔ اینیمیشن کمپوزیشن کو شامل کرنے کے لیے ترتیب دے کر، ہم براؤزر سے کہتے ہیں کہ وہ دونوں اینیمیشن کو یکجا کرے۔ یہ ہمیں وہ نتیجہ دیتا ہے جو ہم چاہتے ہیں۔ .component-2 { animation-composition: add; }
پین کی فریمز ٹوکنز دیکھیں - امیت شین کے ذریعہ ڈیمو 8 [فورکڈ]۔ یہ نقطہ نظر زیادہ تر معاملات میں اچھی طرح سے کام کرتا ہے جہاں ہم ایک ہی پراپرٹی پر اثرات کو یکجا کرنا چاہتے ہیں۔ یہ اس وقت بھی مفید ہے جب ہمیں متحرک املاک کی قدروں کے ساتھ متحرک تصاویر کو یکجا کرنے کی ضرورت ہو۔ مثال کے طور پر، اگر ہمارے پاس کوئی ایسا عنصر ہے جو ٹرانسلیٹ پراپرٹی کو استعمال کرتا ہے تاکہ ہم اسے بالکل اسی جگہ پر رکھیں جہاں ہم چاہتے ہیں، اور پھر ہم اسے kf-slide-in keyframes کے ساتھ اینیمیٹ کرنا چاہتے ہیں، تو ہمیں بغیر اینیمیشن کمپوزیشن کے ایک گندی نظر آنے والی چھلانگ ملتی ہے۔ پین کی فریمز ٹوکنز دیکھیں - امیت شین کے ذریعہ ڈیمو 9 [فورکڈ]۔ اینیمیشن کمپوزیشن کو شامل کرنے کے لیے سیٹ کے ساتھ، اینیمیشن کو موجودہ کے ساتھ آسانی سے جوڑ دیا جاتا ہے۔transform، لہذا عنصر اپنی جگہ پر رہتا ہے اور توقع کے مطابق متحرک ہوتا ہے۔ حرکت پذیری لڑکھڑانا متعدد اینیمیشنز کو سنبھالنے کا ایک اور طریقہ یہ ہے کہ ان کو "حیرت زدہ" کریں — یعنی پہلی حرکت ختم ہونے کے بعد تھوڑی دیر میں دوسری حرکت شروع کریں۔ یہ ایک ایسا حل نہیں ہے جو ہر معاملے میں کام کرتا ہے، لیکن یہ اس وقت مفید ہے جب ہمارے پاس ایک داخلی اینیمیشن ہو جس کے بعد ایک مسلسل حرکت پذیری ہو۔ /* دھندلا پن + دھندلاپن پلس */ اطلاع { حرکت پذیری: kf-fade-in 2s آسانی سے باہر، kf-pulse 0.5s 2s ease-in-out infinite alternate; --kf-pulse-opacity-to: 0.5; }
امیت شین کے قلم کی فریم ٹوکنز - ڈیمو 10 [فورکڈ] دیکھیں۔ آرڈر کے معاملات ہم جن اینیمیشنز کے ساتھ کام کرتے ہیں ان کا ایک بڑا حصہ ٹرانسفارم پراپرٹی کا استعمال کرتا ہے۔ زیادہ تر معاملات میں، یہ صرف زیادہ آسان ہے. اس میں کارکردگی کا فائدہ بھی ہے کیونکہ ٹرانسفارم اینیمیشنز کو GPU سے تیز کیا جا سکتا ہے۔ لیکن اگر ہم تبدیلیوں کا استعمال کرتے ہیں، تو ہمیں یہ قبول کرنے کی ضرورت ہے کہ جس ترتیب میں ہم اپنی تبدیلیوں کو انجام دیتے ہیں وہ اہم ہے۔ بہت کچھ ہمارے کلیدی فریموں میں اب تک، ہم نے انفرادی تبدیلیوں کا استعمال کیا ہے۔ چشمی کے مطابق، یہ ہمیشہ ایک مقررہ ترتیب میں لاگو ہوتے ہیں: پہلے، عنصر کا ترجمہ ہوتا ہے، پھر گھمایا جاتا ہے، پھر پیمانہ ہوتا ہے۔ یہ سمجھ میں آتا ہے اور ہم میں سے اکثر یہی توقع کرتے ہیں۔ تاہم، اگر ہم ٹرانسفارم پراپرٹی کا استعمال کرتے ہیں، جس ترتیب میں فنکشنز لکھے جاتے ہیں وہ ترتیب ہے جس میں وہ لاگو ہوتے ہیں۔ اس صورت میں، اگر ہم کسی چیز کو X-axis پر 100 پکسلز منتقل کرتے ہیں اور پھر اسے 45 ڈگری گھماتے ہیں، تو یہ پہلے اسے 45 ڈگری گھمانے اور پھر اسے 100 پکسلز منتقل کرنے جیسا نہیں ہے۔ /* گلابی مربع: پہلے ترجمہ کریں، پھر گھمائیں*/ .example-one { transform: translateX(100px) rotate(45deg)؛ }
/* سبز مربع: پہلے گھمائیں، پھر ترجمہ کریں */ .example-2 { ٹرانسفارم: گھمائیں(45deg) translateX(100px)؛ }
امیت شین کے ذریعہ قلم کی فریم ٹوکنز - ڈیمو 11 [فورکڈ] دیکھیں۔ لیکن ٹرانسفارم آرڈر کے مطابق، تمام انفرادی تبدیلیاں - ہر وہ چیز جسے ہم نے کلیدی فریم ٹوکنز کے لیے استعمال کیا ہے - تبدیلی کے افعال سے پہلے ہوتا ہے۔ اس کا مطلب ہے کہ آپ جو کچھ بھی ٹرانسفارم پراپرٹی میں سیٹ کریں گے وہ اینیمیشن کے بعد ہوگا۔ لیکن اگر آپ مثال کے طور پر kf-spin keyframes کے ساتھ ترجمہ سیٹ کرتے ہیں، تو ترجمہ حرکت پذیری سے پہلے ہو جائے گا۔ ابھی تک الجھن ہے؟! یہ ایسے حالات کی طرف جاتا ہے جہاں جامد قدریں ایک ہی حرکت پذیری کے لیے مختلف نتائج کا سبب بن سکتی ہیں، جیسے کہ درج ذیل صورت میں:
/* دونوں اسپنرز کے لیے مشترکہ حرکت پذیری*/ اسپنر { اینیمیشن: kf-spin 1s لکیری لامحدود؛ }
/* پنک اسپنر: گھومنے سے پہلے ترجمہ کریں (انفرادی تبدیلی) */ اسپنر گلابی { ترجمہ: 100% 50%; }
/* گرین اسپنر: گھمائیں پھر ترجمہ کریں (فنکشن آرڈر) */ اسپنر سبز { تبدیلی: ترجمہ (100٪، 50٪)؛ }
امیت شین کے ذریعے قلم کی فریمز ٹوکنز - ڈیمو 12 [فورکڈ] دیکھیں۔ آپ دیکھ سکتے ہیں کہ پہلے اسپنر (گلابی) کو ایک ترجمہ ملتا ہے جو kf-spin کے گھومنے سے پہلے ہوتا ہے، لہذا یہ پہلے اپنی جگہ پر چلتا ہے اور پھر گھومتا ہے۔ دوسرے اسپنر (سبز) کو ایک translate() فنکشن ملتا ہے جو انفرادی تبدیلی کے بعد ہوتا ہے، لہٰذا عنصر پہلے گھومتا ہے، پھر اپنے موجودہ زاویہ کی نسبت حرکت کرتا ہے، اور ہمیں وہ وسیع مداری اثر ملتا ہے۔ نہیں، یہ کوئی بگ نہیں ہے۔ یہ ان چیزوں میں سے صرف ایک ہے جو ہمیں CSS کے بارے میں جاننے کی ضرورت ہے اور متعدد اینیمیشنز یا ایک سے زیادہ تبدیلیوں کے ساتھ کام کرتے وقت ذہن میں رکھیں۔ اگر ضرورت ہو تو، آپ kf-spin-alt کی فریمز کا ایک اضافی سیٹ بھی بنا سکتے ہیں جو rotate() فنکشن کا استعمال کرتے ہوئے عناصر کو گھماتا ہے۔ کم حرکت اور جب ہم متبادل کی فریمز کے بارے میں بات کر رہے ہیں، تو ہم "کوئی اینیمیشن نہیں" آپشن کو نظر انداز نہیں کر سکتے۔ کی فریمز ٹوکن استعمال کرنے کا ایک سب سے بڑا فائدہ یہ ہے کہ رسائی کو بیک کیا جا سکتا ہے، اور یہ دراصل کرنا کافی آسان ہے۔ قابل رسائی کو ذہن میں رکھتے ہوئے اپنے کلیدی فریموں کو ڈیزائن کر کے، ہم اس بات کو یقینی بنا سکتے ہیں کہ وہ صارفین جو کم حرکت کو ترجیح دیتے ہیں، بغیر کسی اضافی کام یا کوڈ کی نقل کے، ایک ہموار، کم پریشان کن تجربہ حاصل کریں۔ "کم موشن" کا صحیح معنی ایک اینیمیشن سے دوسری اور پروجیکٹ سے پروجیکٹ میں تھوڑا سا بدل سکتا ہے، لیکن ذہن میں رکھنے کے لیے یہاں چند اہم نکات ہیں: کی فریمز کو خاموش کرنا اگرچہ کچھ اینیمیشنز کو نرم یا سست کیا جا سکتا ہے، لیکن کچھ ایسی بھی ہیں جو کم حرکت کی درخواست کرنے پر مکمل طور پر غائب ہو جانی چاہئیں۔ پلس متحرک تصاویر ایک اچھی مثال ہیں۔ اس بات کو یقینی بنانے کے لیے کہ یہ اینیمیشنز کم موشن موڈ میں نہیں چلتی ہیں، ہم انہیں صرف مناسب میڈیا سوال میں لپیٹ سکتے ہیں۔
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { سے { پیمانہ: var(-kf-pulse-scale-from, 1); دھندلاپن: var(--kf-pulse-opacity-from, 1); } کو { پیمانہ: var(-kf-pulse-scale-to, 1); دھندلاپن:var(--kf-pulse-opacity-to, 1); } } }
یہ اس بات کو یقینی بناتا ہے کہ جن صارفین نے prefers-reduced-motion کو کم کرنے کے لیے سیٹ کیا ہے وہ اینیمیشن نہیں دیکھ پائیں گے اور ان کی ترجیحات سے مماثل تجربہ حاصل کریں گے۔ Instant In کچھ کلیدی فریم ہیں جنہیں ہم آسانی سے نہیں ہٹا سکتے، جیسے داخلی اینیمیشن۔ قدر کو بدلنا چاہیے، متحرک ہونا چاہیے۔ بصورت دیگر، عنصر کی صحیح قدریں نہیں ہوں گی۔ لیکن کم حرکت میں، ابتدائی قدر سے یہ منتقلی فوری ہونی چاہیے۔ اس کو حاصل کرنے کے لیے، ہم کلیدی فریموں کے ایک اضافی سیٹ کی وضاحت کریں گے جہاں قدر فوری طور پر آخری حالت تک پہنچ جاتی ہے۔ یہ ہمارے ڈیفالٹ کی فریم بن جاتے ہیں۔ اس کے بعد، ہم پچھلی مثال کی طرح prefers-reduced-motion سیٹ کے لیے میڈیا استفسار کے اندر باقاعدہ کلیدی فریموں کو شامل کریں گے۔ /* کم حرکت کے لیے فوری طور پر پاپ ان کریں*/ @keyframes kf-zoom { سے، { تک پیمانہ: var(--kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-preference) { /* اصل زوم کی فریمز */ @keyframes kf-zoom { سے { پیمانہ: var(-kf-zoom-from, 0.8); } کو { پیمانہ: var(--kf-zoom-to, 1); } } }
اس طرح، وہ صارفین جو کم حرکت کو ترجیح دیتے ہیں وہ عنصر کو اپنی آخری حالت میں فوری طور پر ظاہر ہوتے ہوئے دیکھیں گے، جبکہ باقی سب کو متحرک منتقلی ملتی ہے۔ نرم نقطہ نظر ایسے معاملات ہیں جہاں ہم کچھ حرکت رکھنا چاہتے ہیں، لیکن اصل اینیمیشن سے کہیں زیادہ نرم اور پرسکون۔ مثال کے طور پر، ہم باؤنس کے داخلی راستے کو ہلکے دھندلے سے بدل سکتے ہیں۔
@keyframes kf-bounce { /* کم حرکت کے لیے نرم دھندلا پن*/ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* اصل باؤنس کی فریمز */ } }
اب، کم موشن فعال کرنے والے صارفین کو اب بھی ظاہری شکل کا احساس ملتا ہے، لیکن باؤنس یا لچکدار اینیمیشن کی شدید حرکت کے بغیر۔ عمارت کے بلاکس کے ساتھ، اگلا سوال یہ ہے کہ انہیں اصل ورک فلو کا حصہ کیسے بنایا جائے۔ لچکدار کی فریم لکھنا ایک چیز ہے، لیکن انہیں ایک بڑے پروجیکٹ میں قابل اعتماد بنانے کے لیے چند حکمت عملیوں کی ضرورت ہوتی ہے جو مجھے مشکل طریقے سے سیکھنا پڑیں۔ نفاذ کی حکمت عملی اور بہترین طرز عمل ایک بار جب ہمارے پاس کلیدی فریم ٹوکنز کی ایک ٹھوس لائبریری ہو جائے تو، اصل چیلنج یہ ہے کہ انہیں روزمرہ کے کام میں کیسے لایا جائے۔
آزمائش یہ ہے کہ تمام کلیدی فریموں کو ایک ساتھ چھوڑ دیا جائے اور مسئلہ حل ہونے کا اعلان کیا جائے، لیکن عملی طور پر میں نے محسوس کیا ہے کہ بتدریج اپنانے سے بہترین نتائج برآمد ہوتے ہیں۔ سب سے عام اینیمیشن کے ساتھ شروع کریں، جیسے دھندلا یا سلائیڈ۔ یہ آسان جیتیں ہیں جو بڑی دوبارہ لکھنے کی ضرورت کے بغیر فوری قیمت دکھاتی ہیں۔ نام ایک اور نکتہ ہے جو توجہ کا مستحق ہے۔ ایک مستقل سابقہ یا نام کی جگہ یہ واضح کرتی ہے کہ کون سے متحرک تصاویر ٹوکن ہیں اور کون سی مقامی ون آف ہیں۔ یہ حادثاتی تصادم کو بھی روکتا ہے اور ٹیم کے نئے اراکین کو مشترکہ نظام کو ایک نظر میں پہچاننے میں مدد کرتا ہے۔ دستاویزات اتنا ہی اہم ہے جتنا کہ خود کوڈ۔ یہاں تک کہ ہر کلیدی فریم ٹوکن کے اوپر ایک مختصر تبصرہ بعد میں اندازہ لگانے کے گھنٹوں کو بچا سکتا ہے۔ ایک ڈویلپر کو ٹوکن فائل کو کھولنے کے قابل ہونا چاہئے، اس کی ضرورت کے اثر کے لئے اسکین کریں، اور استعمال کے پیٹرن کو سیدھے اپنے اجزاء میں کاپی کریں۔ لچک وہی ہے جو اس نقطہ نظر کو کوشش کے قابل بناتی ہے۔ سمجھدار حسب ضرورت خصوصیات کو سامنے لا کر، ہم ٹیموں کو نظام کو توڑے بغیر اینیمیشن کو اپنانے کے لیے جگہ دیتے ہیں۔ ایک ہی وقت میں، زیادہ پیچیدہ نہ کرنے کی کوشش کریں. اہم knobs فراہم کریں اور باقی رائے رکھیں. آخر میں، رسائی کو یاد رکھیں۔ ہر حرکت پذیری کو کم موشن متبادل کی ضرورت نہیں ہے، لیکن بہت سے لوگ کرتے ہیں۔ ان ایڈجسٹمنٹ میں جلدی بیک کرنے کا مطلب ہے کہ ہمیں بعد میں کبھی بھی ان کو دوبارہ تیار کرنے کی ضرورت نہیں ہے، اور یہ دیکھ بھال کی ایک سطح کو ظاہر کرتا ہے جو ہمارے صارفین محسوس کریں گے چاہے وہ اس کا کبھی ذکر نہ کریں۔
میرے تجربے میں، ہمارے ڈیزائن ٹوکن ورک فلو کے حصے کے طور پر کی فریمز ٹوکنز کا علاج کرنا ہی وہ چیز ہے جس سے وہ چپک جاتے ہیں۔ ایک بار جب وہ اپنی جگہ پر آجاتے ہیں، تو وہ خاص اثرات کی طرح محسوس کرنا چھوڑ دیتے ہیں اور ڈیزائن کی زبان کا حصہ بن جاتے ہیں، یہ قدرتی توسیع ہے کہ پروڈکٹ کس طرح حرکت کرتا ہے اور جواب دیتا ہے۔ لپیٹنا متحرک تصاویر تعمیراتی انٹرفیس کے سب سے زیادہ خوشگوار حصوں میں سے ایک ہوسکتی ہیں، لیکن ساخت کے بغیر، وہ مایوسی کا سب سے بڑا ذریعہ بھی بن سکتے ہیں۔ کلیدی فریموں کو ٹوکن کے طور پر دیکھ کر، آپ کوئی ایسی چیز لیتے ہیں جس کا انتظام عام طور پر گندا اور مشکل ہوتا ہے اور اسے ایک واضح، پیشین گوئی کے نظام میں تبدیل کر دیتے ہیں۔ اصل قدر صرف کوڈ کی چند لائنوں کو محفوظ کرنے میں نہیں ہے۔ یہ اعتماد میں ہے کہ جب آپ فیڈ، سلائیڈ، زوم، یا گھماؤ استعمال کرتے ہیں، تو آپ کو بخوبی معلوم ہوتا ہے کہ یہ پورے پروجیکٹ میں کیسا برتاؤ کرے گا۔ یہ اس لچک میں ہے جو لامتناہی تغیرات کے انتشار کے بغیر حسب ضرورت خصوصیات سے حاصل ہوتی ہے۔ اور یہ فاؤنڈیشن میں شامل ہونے کی بجائے رسائی میں ہے۔ایک بعد کی سوچ. میں نے ان خیالات کو مختلف ٹیموں اور مختلف کوڈ بیسز میں کام کرتے دیکھا ہے، اور پیٹرن ہمیشہ ایک جیسا ہوتا ہے۔ ٹوکنز کی جگہ پر ہونے کے بعد، کلیدی فریمز چالوں کا بکھرا مجموعہ بننا بند کر دیتے ہیں اور ڈیزائن کی زبان کا حصہ بن جاتے ہیں۔ وہ مصنوعات کو زیادہ جان بوجھ کر، زیادہ مستقل اور زیادہ زندہ محسوس کرتے ہیں۔ اگر آپ اس مضمون سے ایک چیز لیتے ہیں، تو اسے یہ رہنے دیں: متحرک تصاویر وہی دیکھ بھال اور ساخت کے مستحق ہیں جو ہم پہلے ہی رنگوں، نوع ٹائپ اور اسپیسنگ کو دیتے ہیں۔ کی فریمز ٹوکنز میں تھوڑی سی سرمایہ کاری ہر بار جب آپ کا انٹرفیس حرکت میں آتی ہے تو ادا ہو جاتی ہے۔
