إنشاء رسوم متحركة لطيور Boids مع وعي بالعمق في React

تجمع بأسلوب (وموازاة حركة)!

إنشاء رسوم متحركة لطيور Boids مع وعي بالعمق في React: تجمع بأسلوب (وموازاة حركة!)

مرحباً بكم، علماء الطيور الرقميون ومطورو React الفضوليون! 🪶 اليوم سنخوض غوصة ممتعة وعميقة حول كيف قمتُ ببناء رسوم متحركة لطيور Boids بوعي بالعمق وسرعة موازية للحركة باستخدام React و Framer Motion. هذا ليس مجرد طبق تقليدي من <canvas>، هذا السرب حيوي، يستجيب للمس، ويتأقلم بالكامل في مشروع React العصري القادم لك.

هذا المقال موجه للمطورين الذين يعشقون الرسوم المتحركة، يتوقون للتفاعل، أو يريدون فقط لصفحتهم الرئيسية أن تهمس لهم: "نعم، أستطيع البرمجة."

ما هي طيور Boids أصلاً؟

الطيور Boids هي مخلوقات محاكاة صغيرة اخترعها كريج رينولدز في 1986 لمحاكاة حركة الطيور والأسماك وكل ما يتعلق بالتجمعات. السحر يأتي من ثلاث قواعد:

  1. التباعد: لا تقترب كثيرًا من جارك.
  2. المحاذاة: طِر باتجاه الذي يطير إليه أصدقاؤك.
  3. التماسك: ابقَ قريبًا من المجموعة.

النتيجة؟ سلوك سَرب حيوي ناشئ، محبوب لدى المبرمجين المبدعين في كل مكان.

صورة طيور Boids
صورة طيور Boids

لماذا React للطـيور Boids؟

تقليديًا، تعيش محاكاة طيور Boids في عالم canvas أو WebGL. لكن مع واجهات المستخدم المعززة والأدوات مثل Framer Motion، يمكننا تحريك عناصر DOM بكفاءة—ونحصل على تكامل سهل مع React، وتفاعلية، وحتى تأثيرات تعتمد على التمرير كميزة إضافية.

نصيحة SEO: هذا الأسلوب يعمل بشكل رائع لمواقع الويب والتطبيقات التي تهمها SEO وقابلية الوصول — لا مزيد من إخفاء أفضل العناصر البصرية داخل <canvas> يصعب الوصول إليه!

بنية المكونات

نُغلف منطق التجمع داخل مكون React واحد، <FlockingAnimation />. الكود modular وقابل للتخصيص عبر props، يدعم:

  • حجم السرب (محسوب تلقائياً أو ثابت)
  • السرعة والقوة القصوى
  • أوزان القواعد
  • فئات مخصصة لتسهيل التنسيق

الخصائص (Props):

export type Props = {
  className?: string;
  initialCount?: number;
  maxSpeed?: number;
  maxForce?: number;
  weights?: Partial<Weights>;
};

سلوك طيور Boids: الخوارزمية

كل طائر Boid هو كائن من فئة (class) يحتفظ بموقعه، وسرعته، وتسارعه، والأهم من ذلك — عمقه لخاصية الموازاة.

المنطق الأساسي يحاكي التجمعات الحقيقية:

flock(boids, weights, maxSpeed, maxForce) {
  // 1. حساب متجهات التباعد، المحاذاة، التماسك
  // 2. تطبيق الأوزان وجمعها
  // 3. تطبيق على التسارع
  // 4. تقييد التسارع بالحد الأقصى للقوة
}

كل قاعدة تفحص الطيور القريبة ضمن مدى معين وتحسب متجه التوجيه:

  • التباعد: يدفع بعيداً عن الطيور القريبة جداً.
  • المحاذاة: يحسب متوسط السرعات لمطابقة الاتجاه.
  • التماسك: يوجه نحو الموضع المتوسط.

العمق والموازاة: إضافة الإثارة

كل طائر يحصل على عمق عشوائي (بين 0 و1) عند الإنشاء. العمق يفعل ثلاث أشياء:

  1. سرعة موازية: الطيور الأبعد تتحرك أبطأ، والأقرب أسرع.
  2. الحجم: الطيور في المقدمة أكبر حجماً.
  3. الشفافية: الطيور الأعمق بهالة باهتة، والأقرب أكثر وضوحاً.

يتم التعامل مع هذا في حلقة التحديث:

const speedFactor = 1 + (1 - this.depth) * PARALLAX_FACTOR;
const dtScalar = dtBase * speedFactor;

عند العرض، يتم ربط مقياس وحجم الشفافية لكل طائر بعمقه، ليبدو السرب ثلاثي الأبعاد حقًا. كل ذلك بدون تعقيدات الواقع الافتراضي.

جعله متجاوباً (وممتعاً!)

  • تلاشي مع التمرير: باستخدام useScroll() و useTransform()، تتلاشى الرسوم المتحركة أثناء التمرير فلا تطيل حضورها.
  • تفاعل المؤشر: اسحب بالفأرة أو إصبعك وسيولد طائر جديد عند مؤشر الماوس. لأن من لا يحب أن يشعر كأنه سيد السرب؟
  • توزيع السرب العشوائي: عند التركيب، تولد مجموعات طيور من مراكز عشوائية، تتوزع بشكل طبيعي.

مثال على توليد الطيور:

for (let j = 0; j < groupSize; j++) {
  const ang = Math.random() * Math.PI * 2;
  const rad = Math.random() * SPAWN_RADIUS;
  boidsRef.current.push(
    new Boid(center.x + Math.cos(ang) * rad, center.y + Math.sin(ang) * rad)
  );
}

تحسينات ونصائح للمطورين

  • الرسم مع الانتباه للرؤية: نستخدم مراقب التقاطع (Intersection Observer) لإيقاف التحديثات عندما لا يكون المكون مرئياً، لتوفير موارد المعالج وبطارية المستخدمين المحمولين (أو مراوح اللابتوب!).
  • تحديثات حالة فعالة: نحدّث حالة React فقط عند الضرورة، لنقلل عمليات إعادة العرض قدر الإمكان.
  • قيم الحركة: باستخدام motionValue و <motion.div> من Framer Motion، نحصل على تحولات سلسة جداً في الـ DOM.

الكود المصدري الكامل

يمكنك العثور على الكود كامل الجاهز للدمج أدناه! (فقط جهز إعداد Framer Motion و Tailwind CSS خاصتك).

GitHub.

الخاتمة

بناء طيور Boids المتجمعة في React قد يبدو خياراً غريباً، لكن مع مكتبات الرسوم المتحركة الحديثة، تحصل على التفاعل، الأداء، وتجربة المطور الثمينة — كلها.

Categories