‏تابع arc() در Motion؛ خم‌کردن مسیر انیمیشن

این صفحه از مستندات Motion دربارهٔ تابعی به اسم arc() ـه. به‌صورت پیش‌فرض وقتی Motion مقدارهای x و y رو بین دو مقدار انیمیت می‌کنه، عنصر روی یه خط راست حرکت می‌کنه؛ کاری که arc() می‌کنه اینه که اون خط رو خم می‌کنه و حرکت رو روی یه کمان می‌بره. این تابع به transition.path پاس داده می‌شه و با کامپوننت‌های motion، تابع animate و useAnimate کار می‌کنه:

طبق مستندات، transition.path هرجا که یه transition پذیرفته بشه کار می‌کنه و بین اولین و آخرین مقدارِ x/y میان‌یابی می‌کنه، حتی روی آرایه‌های کی‌فریم. جالب‌تر این‌که با انیمیشن‌های layout هم کار می‌کنه: اگه arc() رو به transition.layout.path بدی، هر عنصری که از نقطهٔ A به B می‌ره روی یه منحنی حرکت می‌کنه، حتی وقتی A و B رو خودِ layoutِ اطراف تعیین می‌کنه نه کی‌فریم‌های ثابت. این همون جاییه که نویسنده می‌گه arc() کاری می‌کنه که میان‌یابیِ خط‌راست از پسش برنمیاد. با layoutId برای ترنزیشن‌های عنصر مشترک هم کار می‌کنه.

یه نکتهٔ ظریف دربارهٔ فنرها (springs) مطرح می‌شه: transition.path فقط منحنی رو توصیف می‌کنه و خودِ ترنزیشنِ راننده چیزیه که کنارش پاس می‌دی. با یه spring، مقدار پیشرفت از t = 1 رد می‌شه و نوسان می‌کنه، برای همین عنصر از نقطهٔ پایان فراتر می‌ره و با یه کمانِ فنری ته‌نشین می‌شه.

مستندات چند گزینه رو شرح می‌ده. strength (پیش‌فرض 0.5) شدتِ خمِ کمان رو تعیین می‌کنه؛ مقدار 1 ارتفاعِ اوج رو برابر فاصلهٔ دو نقطه می‌کنه و 0 یعنی هیچ خمی. peak (پیش‌فرض 0.5) تعیین می‌کنه اوجِ کمان کجای مسیر باشه؛ مقدارهای کوچیک‌تر اوج رو به ابتدای مسیر نزدیک می‌کنن. direction مشخص می‌کنه برآمدگیِ کمان به کدوم سمت باشه: cw ساعتگرد، ccw پادساعتگرد، یا حالتِ خودکار که یه سمتِ پایدار تو فضای صفحه انتخاب می‌کنه. rotate (پیش‌فرض false) عنصر رو می‌چرخونه تا مماس بر کمان حرکت کنه، طوری که مثلاً یه کارت موقع حرکت روی منحنی به‌طور طبیعی کج بشه؛ این چرخش هم با چرخشِ موجودِ عنصر جمع می‌شه.

در آخر، مستندات یه نکتهٔ بهینه‌سازی می‌گه: وقتی از direction خودکار استفاده می‌کنی، می‌تونی برای همهٔ انیمیشن‌های یه کامپوننت یه نمونهٔ واحد از arc() بسازی (مثلاً با useMemo تو React) تا قطعِ و وصلِ انیمیشن (interruption) بهتر مدیریت بشه.

نکات کلیدی:

• arc() مسیر خط‌راستِ پیش‌فرض رو به یه کمان تبدیل می‌کنه و به transition.path پاس داده می‌شه
• با motion، animate، useAnimate و انیمیشن‌های layout و layoutId کار می‌کنه
• strength شدت خم، peak محل اوج و direction جهت برآمدگی رو تعیین می‌کنن
• rotate عنصر رو مماس بر کمان می‌چرخونه
• با direction خودکار، ساختن یه نمونهٔ arc() مشترک قطع‌ووصل انیمیشن رو بهتر می‌کنه