پروڈکشن میں Motion: لے آؤٹ اینیمیشنز اور قابل رسائی پیٹرنز
Framer-motion تبدیل ہو گیا ہے۔ 2024 کے آخر سے، اس پیکیج کا نام اب Motion ہے۔ آپ کو motion/react امپورٹ پاتھ استعمال کرنا ہوگا۔
زیادہ تر ٹیوٹوریلز پرانے ہو چکے ہیں۔ وہ اب بھی پرانے امپورٹس دکھاتے ہیں اور ان میں قابل رسائی (accessibility) کی کمی ہے۔ یہ گائیڈ آپ کو حقیقی پروجیکٹس میں جدید Motion استعمال کرنے میں مدد دے گی۔
اپ گریڈ
یہ تبدیلی سادہ ہے۔ اگر آپ ورژن 11 استعمال کر رہے ہیں، تو ورژن 12 پر منتقل ہونا محض ایک 'find-and-replace' کا کام ہے۔
- ان انسٹال کریں:
npm uninstall framer-motion - انسٹال کریں:
npm install motion - امپورٹس اپ ڈیٹ کریں: 'framer-motion' کو 'motion/react' سے تبدیل کریں۔
آپ مائیگریشن کے دوران دونوں پیکیجز کو ایک ساتھ چلا سکتے ہیں۔ انہیں ہمیشہ کے لیے اپنے کوڈ بیس میں نہ رہنے دیں۔
لے آؤٹ اینیمیشنز
layout پراپ Motion کو کسی ایلیمنٹ کے سائز اور پوزیشن پر نظر رکھنے کا حکم دیتا ہے۔ یہ تبدیلیوں کو اینیمیٹ کرتا ہے بجائے اس کے کہ براؤزر کو اچانک نئی جگہوں پر منتقل ہونے دے۔
لسٹوں کے لیے layout="position" استعمال کریں۔ یہ کسی آئٹم کے بڑھنے پر اس کے ساتھ موجود دیگر آئٹمز (siblings) کو حرکت دیتا ہے لیکن اندرونی مواد کو دباتا (squash) نہیں ہے۔
ماؤنٹنگ (mounting) اور ان ماؤنٹنگ (unmounting) کے لیے AnimatePresence استعمال کریں۔ اس کے بغیر، React ایلیمنٹس کو اینیمیٹ ہونے سے پہلے ہی DOM سے ہٹا دیتا ہے۔
height: auto کو اینیمیٹ کرنے سے گریز کریں۔ اس سے بصری خرابیوں (visual glitches) کا سامنا کرنا پڑ سکتا ہے۔ اس کے بجائے، ہموار ہائٹ کی تبدیلیوں کے لیے CSS grid wrapper (0fr سے 1fr) استعمال کریں۔
قابل رسائی
تقریباً 30% iOS صارفین prefers-reduced-motion کو فعال کرتے ہیں۔ تمام اینیمیشنز کو صرف بند نہ کر دیں۔ اس سے آپ کا لے آؤٹ خراب ہو جائے گا۔
غلط طریقہ: اگر صارف کم موشن چاہتا ہے تو <motion.div> کو ایک سادہ <div> سے بدل دیں۔ اس سے لے آؤٹ اچانک جھٹکے کے ساتھ بدلتا ہے اور ٹوٹا ہوا محسوس ہوتا ہے۔
صحیح طریقہ: ٹرانزیشن (transition) کو کنٹرول کریں، نہ کہ کمپوننٹ کو۔ <motion.div> کو برقرار رکھیں لیکن اس کا duration 0 پر سیٹ کر دیں۔
اسے مینیج کرنے کے لیے ایک کسٹم ہک (custom hook) بنائیں:
useReducedMotionہک استعمال کریں۔- اگر
trueہو، توduration0 واپس کریں۔ - اگر
falseہو، تو اپنی معیاری اسپرنگ سیٹنگز (spring settings) واپس کریں۔
اس سے یہ یقینی بنتا ہے کہ ایلیمنٹس حرکت کے بغیر بھی اپنی درست پوزیشن تک پہنچ جائیں۔
Motion کب استعمال کریں
سادہ فیڈز (fades) کے لیے براؤزر کی Web Animations API استعمال کریں۔ اس کے لیے کسی بیرونی لائبریری کی ضرورت نہیں ہوتی۔
Motion کا استعمال تب کریں جب آپ کو ضرورت ہو:
- React-native APIs جو کمپوننٹ لائف سائیکلز کو سمجھتے ہوں۔
- لے آؤٹ اینیمیشنز جو DOM کی تبدیلیوں کو ٹریک کرتی ہوں۔
- ایگزٹ اینیمیشنز کے لیے
AnimatePresence۔ - ایسی اسپرنگ فزکس (spring physics) جو قدرتی محسوس ہوں۔