‏Legend-Motion؛ انیمیشن اعلانی برای React Native

Legend-Motion یه کتابخونهٔ انیمیشن اعلانی (declarative) برای React Native‌ه؛ یعنی به‌جای اینکه خودت انیمیشن رو قدم‌به‌قدم بسازی و مدیریت کنی، فقط می‌گی مقصد چه استایلی داشته باشه و کتابخونه گذار بهش رو انجام می‌ده. تو معرفی پروژه اومده که هدف اصلیش دقیقاً همین ساده کردن جابه‌جایی بین استایل‌هاست.

شکل استفاده‌ش خیلی نزدیک به Framer Motion‌ه: یه Motion.View می‌ذاری و حالت اولیه، حالت مقصد و رفتار موقع هاور یا لمس رو به‌صورت prop بهش می‌دی:

import { Motion } from "@legendapp/motion"

<Motion.View
    initial={{ y: -50 }}
    animate={{ x: value * 100, y: 0 }}
    whileHover={{ scale: 1.2 }}
    whileTap={{ y: 20 }}
    transition={{ type: 'spring' }}
/>

این شباهت API عمدیه — سازنده‌ها می‌گن این‌طوری قاطی کردن کد React Native با React وب خیلی راحت‌تر می‌شه. کتابخونه هم react-native و هم react-native-web رو پشتیبانی می‌کنه، پس یه کد انیمیشن می‌تونه هر دو طرف رو پوشش بده.

از بقیهٔ قابلیت‌هاش می‌شه به انیمیشن روی SVG و گرادیان خطی، پشتیبانی از transformOrigin و AnimatePresence برای انیمیشن خروج کامپوننت اشاره کرد. whileHover و whileTap هم انیمیشن‌های واکنشی به لمس رو ساده می‌کنن، ولی بعد از نسخهٔ ۱.x این دو تا prop حتماً به یه والد Motion.Pressable نیاز دارن — نکته‌ای که موقع ارتقا باید حواست بهش باشه.

نکتهٔ فنی جالبش اینه که صفر وابستگی داره و روی Animated داخلی خود React Native سواره، و کاملاً هم با TypeScript تایپ شده. پروژه با لایسنس MIT منتشر شده و Jay Meistrich اونو می‌سازه و نگه‌داری می‌کنه.

نکات کلیدی:

• انیمیشن اعلانی برای React Native و react-native-web، بدون مدیریت دستی انیمیشن
• API نزدیک به Framer Motion برای ترکیب راحت‌تر با React وب
• پشتیبانی از SVG، گرادیان خطی، transformOrigin و AnimatePresence
• صفر وابستگی، مبتنی بر Animated داخلی و تایپ‌شده با TypeScript
• بعد از ۱.x، whileHover و whileTap به والد Motion.Pressable نیاز دارن