‏مورف کارت: انیمیشن نیتیو کارت به مودال در ری‌اکت نیتیو

این کتابخونه یه مسئلهٔ آشنا رو حل می‌کنه: وقتی روی یه کارت توی لیست می‌زنی و می‌خوای نرم باز شه و کل صفحه رو بگیره. طبق مستندات، react-native-morph-card این گذار رو با مورف‌کردن اندازه، موقعیت و شعاع گوشهٔ کارت انجام می‌ده و بعد دوباره جمعش می‌کنه، طوری که حس یه حرکت پیوسته رو بده نه یه پرش ناگهانی بین دو صفحه.

نکتهٔ اصلی اینه که انیمیشن کاملاً نیتیوه. روی iOS از UIViewPropertyAnimator و روی اندروید از ValueAnimator استفاده می‌کنه، پس هیچ انیمیشن جاوااسکریپتی، وب‌ویو یا فلگ آزمایشی‌ای در کار نیست. همین باعث می‌شه حرکت روون‌تر باشه و به رشتهٔ جاوااسکریپت وابسته نباشه.

مدل کارش ساده‌ست: محتوای کارت رو توی MorphCardSource می‌پیچی و توی صفحهٔ جزئیات، جایی که کارت باید فرود بیاد، MorphCardTarget رو می‌ذاری. برای جمع‌کردن دوباره هم هوک useMorphTarget یه تابع dismiss بهت می‌ده:

const { dismiss } = useMorphTarget({
  sourceTag: route.params.sourceTag,
  navigation,
});

یه جزئیات جالب توی مستندات اینه که حین انیمیشن، محتوا به شکل یه اسنپ‌شات بیت‌مپ گرفته می‌شه، ولی به‌محض تموم‌شدن انیمیشن، اون اسنپ‌شات محو می‌شه و فرزندهای MorphCardSource به‌صورت کامپوننت‌های زندهٔ ری‌اکت داخل MorphCardTarget کلون می‌شن. یعنی تایمرها، مقادیر انیمیشن‌شده و دیتای زنده بعد از گذار درست به‌روز می‌شن. فقط اگه از resizeMode استفاده کنی، بیت‌مپ نگه داشته می‌شه چون مقیاس‌گذاری نیتیو تصویر روی کامپوننت‌های ری‌اکت اعمال نمی‌شه.

کتابخونه یه سری پراپ برای تنظیم دقیق‌تر می‌ده، مثل expandDuration و collapseDuration برای مدت باز و بسته‌شدن، borderRadius برای شعاع گوشه‌ها، و حتی rotations و rotationEndAngle برای چرخوندن کارت موقع باز شدن. یه توصیهٔ مهم توی مستندات اینه که صفحهٔ جزئیات باید به‌صورت مودال ارائه بشه و گذار پیش‌فرض ناوبری خاموش بشه، وگرنه ترکیب دوتا انیمیشن خراب به‌نظر می‌رسه.

روی نقشهٔ راه هم چیزهایی مثل حالت‌های ارائهٔ بیشتر، گذار shared element بین ویوهای دلخواه، جمع‌کردن با ژست کشیدن و تنظیم فیزیک اسپرینگ اومده. کتابخونه با مجوز MIT منتشر شده.

نکات کلیدی:

• کارت لیست رو با انیمیشن نیتیو به نمای جزئیات تمام‌صفحه مورف می‌کنه و برمی‌گردونه
• انیمیشن روی iOS با UIViewPropertyAnimator و روی اندروید با ValueAnimator اجرا می‌شه؛ بدون جاوااسکریپت و وب‌ویو
• با React Navigation، expo-router و معماری جدید Fabric کار می‌کنه
• بعد از گذار، فرزندهای کارت به کامپوننت زندهٔ ری‌اکت تبدیل می‌شن، پس دیتای زنده به‌روز می‌مونه
• مجوز MIT