‏Ease: انیمیشن اعلانی و سبک تو React Native

react-native-ease یه کتابخونهٔ سبک برای انیمیشن‌های اعلانی (declarative) تو React Native ـه. ایدهٔ اصلیش اینه که انیمیشن‌ها رو کامل رو API های بومی پلتفرم اجرا کنه: رو iOS از Core Animation و رو Android از Animator/ObjectAnimator استفاده می‌کنه، بدون هیچ حلقهٔ انیمیشن جاوااسکریپتی، worklet یا shared value. این کتابخونه رو استودیوی App & Flow ساخته.

کار باهاش شبیه transition تو CSS ـه؛ فقط یه کامپوننت به اسم EaseView داری که مثل View معمولی، بچه و استایل و همهٔ propهای استاندارد رو قبول می‌کنه. کافیه مقدار مقصد رو تو prop به اسم animate بذاری و نوع انیمیشن رو تو transition مشخص کنی؛ هر وقت اون مقدارها عوض بشن، خودش نرم به مقدار جدید می‌رسه.

import { EaseView } from 'react-native-ease';

<EaseView
  animate={{ opacity: visible ? 1 : 0 }}
  transition={{ type: 'timing', duration: 300 }}
  style={styles.card}
>
  {children}
</EaseView>

دو مدل اصلی انیمیشن داره: timing که با یه مدت و منحنی easing (مثل easeOut یا حتی یه cubic-bezier سفارشی) از یه مقدار به مقدار دیگه می‌ره، و spring که با یه مدل فیزیکی و پارامترهای damping، stiffness و mass حس طبیعی‌تری می‌ده. می‌تونی برای هر دسته از ویژگی‌ها (مثل opacity، transform یا border) هم انیمیشن جدا تعریف کنی. یه ویژگی مهمش هم اینه که انیمیشن‌ها وسط کار قابل‌قطع‌ان و بدون پرش به مقصد جدید هدایت می‌شن.

از NativeWind و Uniwind هم پشتیبانی می‌کنه، پس اگه با className استایل می‌دی، با یه ایمپورت راه می‌افته. ولی نویسنده صریح می‌گه این کتابخونه برای همه‌کار نیست: انیمیشن‌های مبتنی بر ژست (pan/pinch)، انیمیشن لِی‌اوت (عرض و ارتفاع) و ترنزیشن المان مشترک رو پشتیبانی نمی‌کنه و برای اون‌ها باید سراغ react-native-reanimated بری. ضمناً فقط رو معماری جدید (Fabric) کار می‌کنه.

یه نکتهٔ جالب هم داره: پروژه یه Agent Skill همراهشه که کدت رو اسکن می‌کنه و انیمیشن‌های نوشته‌شده با Reanimated یا Animated رو که قابل‌مهاجرت باشن، خودکار به react-native-ease تبدیل می‌کنه. اول تشخیص می‌ده کدوم‌ها قابل‌مهاجرت‌ان و کدوم‌ها نه، بعد یه گزارش قبل/بعد نشون می‌ده و می‌ذاره خودت انتخاب کنی چیا مهاجرت بشن.

نکات کلیدی:

• انیمیشن اعلانی که مستقیم رو Core Animation و Animator اجرا می‌شه، بدون overhead جاوااسکریپت
• API شبیه transition تو CSS با یه کامپوننت EaseView و دو prop به اسم animate و transition
• پشتیبانی از timing و spring، easing سفارشی و انیمیشن جدا برای هر دسته ویژگی
• سازگار با NativeWind و Uniwind؛ فقط رو معماری Fabric
• همراه یه Agent Skill برای مهاجرت خودکار از Reanimated/Animated