انیمیشن رو میشه مثل یه معادلهٔ ریاضی طراحی کرد
فرانتاند
جاوااسکریپتخلاصهٔ کاملتر
نویسنده این مقاله میگه هر انیمیشنی، هرچقدرم پیچیده به نظر برسه، در نهایت یه نمودار سادهست: محور افقی میتونه زمان باشه یا هر مقدار دیگهای مثل میزان اسکرول، و محور عمودی همون چیزیه که داره تغییر میکنه (شفافیت، موقعیت، اندازه). شکل این نمودار همون چیزیه که حس حرکت رو میسازه، و ابزار اصلی برای ساختن شکل دلخواه، ریاضیه.
سادهترین ابزار easing با منحنیهای Bézier مکعبیه. با تعریف دو نقطهٔ کنترل، میشه شکل شتابگیری و کندشدن حرکت رو دقیق تنظیم کرد؛ مثلاً ease-out اول سریع شروع میشه و آرومآروم میایسته. زیر پوشش این منحنی، یه درونیابی خطی (lerp) بهصورت بازگشتی روی چندتا نقطه اجرا میشه:
function lerp(a, b, t) {
return a + (b - a) * t;
}برای وقتی هدف حرکت مدام عوض میشه (مثل دنبالکردن نشونگر ماوس)، فرمول سادهی exponential approach جواب میده: value += (target - value) * factor. اما اگه بخوای حس فیزیکی و برگشتپذیر مثل فنر داشته باشی، باید از شبیهسازی نوسان میرا استفاده کنی که با دو پارامتر stiffness و damping کنترل میشه؛ برخلاف easing، فنر مدتزمان مشخصی نداره و تا رسیدن به هدف ادامه پیدا میکنه.
نویسنده میگه شبیهسازی فیزیک واقعی (گرانش، برخورد، اصطکاک) وقتی جواب میده که چندتا عنصر با هم درگیر باشن، مثل ریختن کانفتی. برای چرخوندن یه عنصر به سمت مسیر حرکتش هم تابع atan2(dy, dx) به کار میره. و برای حرکتهای تکرارشونده مثل چشمکزدن یا موج، توابع مثلثاتی مثل sin با فاز و دامنهٔ متفاوت برای هر عنصر استفاده میشن.
در بخش پایانی، نویسنده توضیح میده چطور انیمیشنهای پیچیده رو طراحی کنیم: اول نمودار رو به تکههای سادهتر بشکن (مثل یه تابع تکهای)، بعد مشخص کن مقدار به چی وابستهست (زمان، یه مقدار خاص مثل اسکرول، یا یه رویداد)، و در آخر تکهها رو به روشهایی مثل پشتسرهم چیدن (pipelining) کنار هم بچین.
نکات کلیدی:
- منحنی Bézier مکعبی با دو نقطهٔ کنترل شکل easing رو مشخص میکنه
- فرمول exponential approach: value += (target - value) * factor
- انیمیشن فنری با stiffness و damping کنترل میشه و مدتزمان ثابت نداره
- تابع atan2(dy, dx) جهت حرکت یه عنصر رو مشخص میکنه
- تابع sin با فاز متفاوت برای هر عنصر، حرکت موجی ایجاد میکنه
