‏یه کامپوننت که عکس‌ها رو مثل ژله تو هم ذوب می‌کنه

اکثر ترنزیشن‌های بین دو عکس تو اپ‌ها فقط یه کراس‌فید سادن، یعنی یکی محو می‌شه و اون یکی ظاهر می‌شه. react-native-morph-view یه راه دیگه رو انتخاب کرده: یه کامپوننت به اسم MorphView که با یه شیدر نیتیو، دو عکس رو واقعاً تو هم آب می‌کنه، شبیه افکت metaball (یعنی وقتی دو حباب به هم نزدیک می‌شن و به جای این‌که همدیگه رو قطع کنن، به هم می‌چسبن و یه شکل واحد می‌سازن) که تو موشن‌گرافیک زیاد دیده می‌شه.

کل رابطش خیلی ساده‌ست: یه prop به اسم toggle می‌گیره و وقتی مقدارش عوض شه، خودش انیمیشن از عکس from به عکس to رو (و برعکس) اجرا می‌کنه، بدون این‌که لازم باشه کد انیمیشن دستی بنویسی:

<MorphView
  toggle={on}
  from={require('./assets/heart.png')}
  to={require('./assets/star.png')}
  blurRadius={24}
/>

زیر پوشش، هر دو عکس بلور می‌شن تا وسط ترنزیشن، بعد با یه آستانه‌ی آلفا دوباره تیز می‌شن؛ همین باعث می‌شه شکل‌های هم‌پوشان قاطی هم بشن و یه بلاب واحد بسازن قبل از این‌که به شکل نهایی برسن. رو iOS این افکت با Metal اجرا می‌شه و رو اندروید با AGSL (یه زبان شیدرنویسی مخصوص اندروید ۱۳ به بعد)، و گوشی‌های قدیمی‌تر اندروید فقط یه کراس‌فید ساده می‌بینن. رو وب هم چون شیدر نیتیو در دسترس نیست، به جاش یه کراس‌فید نرم با بلور اجرا می‌شه.

این کتابخونه فقط رو معماری جدید (Fabric) کار می‌کنه و به React Native 0.76 به بالا، iOS 15.1+ و اندروید API 33+ نیاز داره. blurRadius و duration هم کنترل می‌کنن که ترنزیشن چقدر «ژله‌ای» و کند باشه.

نکات کلیدی:

• یه prop به اسم toggle کل انیمیشن رو کنترل می‌کنه، بدون کد انیمیشن دستی
• رو iOS با شیدر Metal و رو اندروید با AGSL (اندروید ۱۳+) اجرا می‌شه
• رو وب و اندرویدهای قدیمی‌تر فقط یه کراس‌فید ساده جایگزینش می‌شه
• نیاز به React Native 0.76+، معماری Fabric، iOS 15.1+ و اندروید API 33+ داره
• blurRadius و duration میزان «غلیظی» و سرعت ترنزیشن رو تنظیم می‌کنن