موشن در محیط عملیاتی: انیمیشنهای چیدمان و الگوهای دسترسپذیر
Framer-motion تغییر کرده است. از اواخر سال ۲۰۲۴، نام این پکیج به Motion تغییر یافته است. شما باید از مسیر import motion/react استفاده کنید.
بیشتر آموزشها قدیمی شدهاند. آنها هنوز از importهای قدیمی استفاده میکنند و به موضوع دسترسپذیری (accessibility) توجهی ندارند. این راهنما به شما کمک میکند تا از Motion مدرن در پروژههای واقعی استفاده کنید.
ارتقا
فرآیند انتقال ساده است. اگر از نسخه ۱۱ استفاده میکنید، ارتقا به نسخه ۱۲ تنها یک کارِ «جستجو و جایگزینی» (find-and-replace) است.
- حذف:
npm uninstall framer-motion - نصب:
npm install motion - بهروزرسانی importها: تغییر
'framer-motion'به'motion/react'
در طول فرآیند مهاجرت، میتوانید هر دو پکیج را همزمان اجرا کنید. اما اجازه ندهید این دو برای همیشه در کد شما باقی بمانند.
انیمیشنهای چیدمان
پراپ layout به Motion میگوید که اندازه و موقعیت یک المان را زیر نظر بگیرد. این کار باعث میشود تغییرات به صورت انیمیشن اجرا شوند، به جای اینکه مرورگر ناگهان المان را به موقعیت جدید پرتاب کند (snap).
برای لیستها از layout="position" استفاده کنید. این کار باعث میشود وقتی یک آیتم بزرگ میشود، آیتمهای همسطح (siblings) جابهجا شوند، اما محتوای داخل آن آیتم فشرده نشود.
برای فرآیندهای mount و unmount از AnimatePresence استفاده کنید. بدون آن، React المانها را از DOM حذف میکند، پیش از آنکه بتوانند انیمیشن خروج را اجرا کنند.
از انیمیت کردن height: auto خودداری کنید، زیرا باعث ایجاد اختلالات بصری (glitches) میشود. در عوض، برای تغییرات نرمِ ارتفاع، از یک wrapper با CSS grid (از 0fr به 1fr) استفاده کنید.
دسترسپذیری
حدود ۳۰٪ از کاربران iOS گزینه prefers-reduced-motion را فعال میکنند. فقط انیمیشنها را خاموش نکنید، زیرا این کار چیدمان (layout) شما را بههم میریزد.
روش اشتباه: اگر کاربر حرکت کمتر را میخواهد، <motion.div> را با یک <div> معمولی جایگزین کنید. این کار باعث میشود چیدمان ناگهان تغییر کند و حس خرابی بدهد.
روش درست: انتقال (transition) را کنترل کنید، نه کامپوننت را. <motion.div> را نگه دارید اما مدتزمان (duration) را روی ۰ تنظیم کنید.
یک هوک سفارشی برای مدیریت این موضوع بسازید:
- از هوک
useReducedMotionاستفاده کنید. - اگر مقدار آن
trueبود، مقدارdurationرا ۰ برگردانید. - اگر
falseبود، تنظیمات استانداردspringخود را برگردانید.
این کار تضمین میکند که المانها بدون حرکتِ بصری، همچنان به موقعیتهای صحیح خود برسند.
چه زمانی از Motion استفاده کنیم
برای محو شدنهای (fades) ساده، از Web Animations API مرورگر استفاده کنید. این API هیچ وابستگی (dependency) اضافی ندارد.
زمانی از Motion استفاده کنید که نیاز دارید:
- از APIهای React-native که چرخه حیات (lifecycle) کامپوننت را درک میکنند، استفاده کنید.
- انیمیشنهای چیدمان (layout) داشته باشید که تغییرات DOM را دنبال میکنند.
- از
AnimatePresenceبرای انیمیشنهای خروج استفاده کنید. - از فیزیکِ فنری (spring physics) که حس طبیعی دارند، بهره ببرید.