توابع نرم‌کننده (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);

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

API

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

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

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

easeIn / easeOut

پارامترها

بازگشت

یادداشت‌ها

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

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