توابع نرم‌کننده (tween)

هفت خانوادهٔ نرم‌کننده، هر یک با شکل easeIn و easeOut. ریاضیات ناب‌اند: نه DOM دارند و نه حلقهٔ RAFِ خودشان. شما زمان کنونی را از قاب پویانمایی خودتان می‌دهید و مقداری را می‌گیرید که آن قاب باید به کار ببرد.

آرگومان‌ها از قرارداد کلاسیک رابرت پنر پیروی می‌کنند:

• t: زمان کنونی (چه اندازه گذشته است)
• b: مقدار آغازین
• c: تغییر مقدار (مقدار پایانی برابر b + c است)
• d: مدت

هر تابع در درون خود بر t >= d مهار می‌گذارد، پس فراخوانی پس از پایان، مقدار نهایی را می‌دهد و بیرون از بازه برون‌یابی نمی‌کند.

کاربرد

import { cubic } from 'ranuts/utils';

const start = performance.now();
const tick = (now: number) => {
  const x = cubic.easeOut(now - start, 0, 300, 600); // از ۰ تا ۳۰۰ در ۶۰۰ میلی‌ثانیه
  el.style.transform = `translateX(${x}px)`;
  if (now - start < 600) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);

منحنی‌های در دسترس

برون‌داد	منحنی	حس
quad	درجه‌دو (t²)	ملایم‌ترین شتاب؛ پیش‌فرضی مطمئن
cubic	درجه‌سه (t³)	به‌روشنی چابک‌تر از quad
quart	درجه‌چهار (t⁴)	شتاب پرتوان
quint	درجه‌پنج (t⁵)	بسیار پرتوان؛ پایانِ کار بر حرکت چیره است
sine	سینوسی	نرم‌ترین از همه، به‌زحمت به چشم می‌آید
expo	نمایی	تقریباً ایستا، و سپس دویدنی ناگهانی
circ	دایره‌ای	آغاز کند، پایان بسیار ناگهانی

API

همهٔ برون‌دادها یک شکل دارند:

interface SpeedType {
  easeIn: EasingFn;
  easeOut: EasingFn;
}

type EasingFn = (t: number, b: number, c: number, d: number) => number;

easeIn / easeOut

پارامترها

پارامتر	توضیح	نوع	پیش‌فرض
t	زمان سپری‌شده	number	الزامی
b	مقدار آغازین	number	الزامی
c	تغییر مقدار (پایان برابر b + c)	number	الزامی
d	مدت	number	الزامی

بازگشت

آرگومان	توضیح	نوع
value	مقدار در زمان t	number

یادداشت‌ها

easeIn کند آغاز می‌کند و شتاب می‌گیرد؛ easeOut تند آغاز می‌کند و کند می‌شود. برای رابطی که به کنش کاربر پاسخ می‌دهد، easeOut معمولاً بهتر خوانده می‌شود: عنصر بی‌درنگ حرکت می‌کند و می‌نشیند، به‌جای آنکه نخست درنگ کند.

با سپاس از zhangxinxu/Tween.