HTML Academy · درس

التحريك باستخدام requestAnimationFrame

إنشاء رسوم متحركة سلسة على canvas باستخدام حلقة إطارات الحركة

التحريك باستخدام requestAnimationFrame درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

لماذا نستخدم requestAnimationFrame؟

يجدول requestAnimationFrame (rAF) دالة رد اتصال قبل إعادة الرسم التالية للمتصفح، مما يزامن التحريك مع معدل تحديث الشاشة (60 إطارًا في الثانية عادةً). بخلاف setInterval، يتوقف rAF عند إخفاء علامة التبويب، مما يوفر المعالج والبطارية.

حلقة التحريك الأساسية

تتكون حلقة rAF من تعريف دالة animate ترسم الإطار الحالي، ثم تستدعي requestAnimationFrame(animate) لجدولة الإطار التالي. يستدعي المتصفح animate قبل كل إعادة رسم، مما ينشئ تحريكًا مستمرًا بمعدل إطارات الشاشة.

function animate(timestamp) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // draw frame at current state
  draw(timestamp);
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

معلمة الطابع الزمني

يمرر rAF قيمة DOMHighResTimeStamp (بالملي ثانية منذ تحميل الصفحة) إلى دالة رد الاتصال. استخدمها لحساب حركة مستقلة عن معدل الإطارات: delta = timestamp - lastTimestamp. اضرب السرعة في delta لتحريك المسافة نفسها في كل ثانية بغض النظر عن معدل الإطارات.

الحركة المستقلة عن معدل الإطارات

احسب الوقت المنقضي منذ الإطار الأخير، واضبط الحركة وفقًا لذلك. يقطع كائن يتحرك بسرعة 100px/s مسافة 100 * (delta / 1000) بكسل في كل إطار. يضمن ذلك فيزياء متسقة على شاشات بمعدل 30fps و144fps.

إيقاف التحريك

يعيد rAF معرّفًا. ألغِه باستخدام cancelAnimationFrame(handle). خزّن المعرّف في متغير، أو تحقّق من علامة تشغيل داخل الحلقة، أو ألغِ الحلقة عند تنظيف المكوّن. ألغِ الحلقات دائمًا عند إزالة العنصر من DOM.

نمط تحريك Canvas

في كل إطار: (1) نفّذ clearRect على اللوحة بأكملها، (2) حدّث متغيرات الحالة (الموضع والزاوية والوقت)، (3) ارسم جميع الكائنات في مواضعها الجديدة، (4) استدعِ requestAnimationFrame للإطار التالي. لا تتخطَّ clearRect مطلقًا — إذ ستتراكم الإطارات القديمة على شكل أثر.

تحويلات CSS مقابل rAF

استخدم انتقالات وتحريكات CSS للتحريكات البسيطة المعتمدة على الخصائص، مثل تأثيرات المرور وتحريك ظهور النوافذ المنبثقة. واستخدم rAF للتحريكات المعقدة والتفاعلية، مثل حلقات الألعاب ومحاكاة الفيزياء وعرض Canvas، عندما تحتاج إلى تحكم دقيق في كل إطار.

التخزين المؤقت المزدوج في Canvas

للمشاهد المعقدة، ارسم أولًا على لوحة خارج الشاشة، ثم استخدم drawImage لرسمها على اللوحة المرئية بعملية واحدة. يمنع ذلك الوميض من خلال عدم عرض إطار مرسوم جزئيًا مطلقًا — إذ تُحدّث اللوحة المرئية ذريًا في كل إطار.

تحديد معدل الإطارات المستهدف

حدّد معدل الإطارات عند قيمة أقل (مثل 30fps): تحقّق مما إذا كان قد انقضى وقت كافٍ منذ آخر رسم قبل العرض. if (timestamp - lastDraw >= 1000/30) { draw(); lastDraw = timestamp; }. وجدول rAF على أي حال للحفاظ على الاستجابة.

تصحيح أخطاء التحريك

يسجل قسم Performance في Chrome DevTools عمليات استدعاء rAF في مخطط اللهب الخاص بـ JS. ابحث عن عمليات استدعاء طويلة تتجاوز 16ms — فهي تتسبب في إسقاط إطارات. استخدم مقياس FPS (Rendering → FPS Meter) لمراقبة معدل الإطارات في الوقت الفعلي أثناء التفاعل.

بديل Web Animations API

للتحريكات التعريفية الأبسط من دون إدارة التوقيت يدويًا: element.animate(keyframes, options). يتولى WAAPI دوال التوقيت وأنماط الملء والتكرار، وينقل حساب الإطارات إلى المتصفح. استخدم rAF لمنطق العرض المخصص الذي لا يستطيع WAAPI التعبير عنه.

اختبار الفهم

لماذا يجب ضرب سرعة التحريك في delta time داخل حلقة requestAnimationFrame؟

الملخص

يزامن requestAnimationFrame تحريك JavaScript مع معدل تحديث الشاشة، ويتوقف عند إخفاء علامات التبويب. تتيح معلمة الطابع الزمني حركة مستقلة عن معدل الإطارات من خلال ضبطها باستخدام delta time. ويشكّل نمط حلقة تحريك Canvas (المسح، والتحديث، والرسم، والجدولة)، مع cancelAnimationFrame للتنظيف، أساس التحريكات السلسة والفعالة على الويب.

الأسئلة الشائعة

هل درس «التحريك باستخدام requestAnimationFrame» مجاني؟

نعم — نص درس «التحريك باستخدام requestAnimationFrame» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «التحريك باستخدام requestAnimationFrame»؟

إنشاء رسوم متحركة سلسة على canvas باستخدام حلقة إطارات الحركة تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «التحريك باستخدام requestAnimationFrame»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى HTML Academy