لماذا تبدو الرسوم المتحركة "آلية"؟

تصبح الرسوم المتحركة آلية عندما يتحرك كائن بسرعة ثابتة أو يتوقف فجأة. الحركة الطبيعية تتسارع في البداية وتتباطأ في النهاية.

الأداة المحورية: lerp()


let x = 0;
function draw() {
  x = lerp(x, mouseX, 0.1); // كل إطار، تقدم 10% نحو الهدف
  ellipse(x, height/2, 20, 20);
}

المعامل 0.1 يتحكم في السرعة. هذا يخلق ease-out طبيعياً: سريع في البداية، بطيء قرب الهدف.

منحنيات التخفيف


function smoothstep(t) { return t*t*(3 - 2*t); }
let progress = 0;
function draw() {
  progress = min(progress + 0.02, 1);
  let t = smoothstep(progress);
  let x = lerp(startX, endX, t);
}

مشكلة معدل الإطارات

استخدم deltaTime لتطبيع الحركة عبر الأجهزة:


let dt = deltaTime / 16.67;
x = lerp(x, mouseX, 0.1 * dt);

قواعد عملية

1. lerp() بمعامل منخفض لتتبع الفأرة

2. تخفيف يدوي للرسوم المتحركة المُشغَّلة بالحدث

3. deltaTime للتوزيع على أجهزة متعددة

4. sin() للحركة الإيقاعية والاهتزازية

درس التخفيف التفاعلي ← · ناقش مشروعك ←

← ناقش مشروعك