יצירת אנימציית Boids עם מודעות לעומק ב-React

עוף יחד בסטייל (עם פרלקס!)

יצירת אנימציית Boids עם מודעות לעומק ב-React: עוף יחד בסטייל (עם פרלקס!)

ברוכים הבאים, אורניתולוגים דיגיטליים ומפתחי React סקרנים! 🪶 היום נצלול עמוק וכיף אל האופן שבו בניתי אנימציית Boids עם מודעות לעומק ומהירות פרלקס באמצעות React ו-Framer Motion. זה לא סתם מרק Boid רגיל ב-<canvas> — העדר הזה חיוני, מגיב למגע, ומתאים בצורה מושלמת לפרויקט ה-React המודרני הבא שלכם.

פוסט זה מיועד למפתחים שאוהבים אנימציות, משתוקקים לאינטראקטיביות, או פשוט רוצים שהדף הבית שלהם ילחוש, "כן, אני יודע לתכנת."

מה זה בכלל Boids?

Boids הם יצורים מדומים קטנטנים שפיתח קרייג ריינולדס בשנת 1986 כדי לחקות תנועה של ציפורים, דגים וכל מה שנע בעדר. הקסם מגיע משלוש חוקים:

  1. הפרדה: אל תתקרב יותר מדי לשכנים שלך.
  2. התאמה: טוס באותה כיוון כמו חבריך.
  3. קוהזיה: הישאר קרוב לקבוצה.

התוצאה? התנהגות אלגוריתמית מתעוררת מדמה עדרים חיים, אהובה על מפתחים יצירתיים בכל העולם.

תמונה של boids
תמונה של boids

למה React ל-Boids?

מסורתית, סימולציות Boid פועלות ב-canvas או WebGL. אבל היום, עם ממשקי משתמש חדישים וכלים כמו Framer Motion, אנחנו יכולים להנפיש אלמנטים של ה-DOM ביעילות — עם אינטגרציה פשוטה ל-React, אינטראקטיביות, ואפילו אפקטים מבוססי גלילה כבורוסה.

טיפ SEO: גישה זו מצוינת לאתרים ואפליקציות שבהם SEO ונגישות חשובים — לא צריך יותר להחביא את הויזואליות הכי מגניבה שלך בתוך <canvas> לא נגיש!

מבנה הרכיב

אוספים את כל הלוגיקה של העדר בתוך רכיב React יחיד, <FlockingAnimation />. הקוד מודולרי וניתן להתאמה דרך props, תומך ב:

  • גודל העדר (מחושב אוטומטית או קבוע)
  • מהירות וכוח מקסימליים
  • משקלי החוקים
  • מחלקות מותאמות לעיצוב פשוט

Props:

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

התנהגויות Boid: האלגוריתם

כל Boid הוא מופע של מחלקה, שמנהל את מיקומו, מהירותו, תאוצתו, וחשוב לא פחות — את העומק שלו לטובת אפקטי פרלקס.

הלוגיקה המרכזית מחקה את תנועות העדר בחיים האמיתיים:

flock(boids, weights, maxSpeed, maxForce) {
  // 1. חשב וקטורי הפרדה, התאמה, וקוהזיה
  // 2. שקלול וסכימתם
  // 3. החלתם על התאוצה
  // 4. הגבלת התאוצה לפי maxForce
}

כל חוק בוחן boids סמוכים בטווח מסוים ומחשב וקטור כיוון:

  • הפרדה: דוחף להתרחק מ-boids שקרובים מדי.
  • התאמה: ממוצע מהירויות כדי להתאים לכיוון הקבוצה.
  • קוהזיה: מנתב למיקום הממוצע.

עומק ופרלקס: מוסיפים את הוואו

לכל boid מוקצה עומק אקראי (בין 0 ל-1) בעת יצירתו. העומק משפיע על שלושה דברים:

  1. מהירות פרלקס: boids רחוקים זזים לאט יותר, קרובים מהר יותר.
  2. סקאלה: boids בקדמה גדולים יותר.
  3. שקיפות: boids עמוקים יותר מטושטשים, קרובים יותר מובלטים.

הדבר מטופל בלולאת העדכון:

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

בעת ההצגה, קנה המידה והשקיפות של כל boid תואמים לעומק שלו, כך שהעדר נראה אמיתי ותלת-ממדי. כל העומק של VR, בלי כאבי הראש.

להפוך את זה רספונסיבי (וגם כיף!)

  • דהייה מבוססת גלילה: בעזרת useScroll() ו-useTransform(), האנימציה דוהה בהדרגה בזמן הגלילה, כך שהיא לא תטריד יותר מדי.
  • אינטראקציה עם מצביע: גרור עם העכבר או האצבע ויצר boid חדש במיקום הסמן שלך. כי מי לא רוצה להרגיש כמו אדון העדר?
  • פיזור קבוצות רנדומלי: בהטמעה, קבוצות boids נוצרות ממרכזים אקראיים ומתפשטות בצורה טבעית.

דוגמה ליצירת boids:

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 כדי להשהות את העדכון כשהרכיב לא נראה, לחסוך משאבי CPU וסוללה למשתמשים ניידים (או למאווררי הלפטופ שלך).
  • עדכוני מצב יעילים: יעדכנו את ה-state רק כשנדרש, לשמור על מינימום רינדורים.
  • ערכי תנועה: שימוש ב-motionValue של Framer Motion וב-<motion.div> מונפשים מעניקים טרנספורמציות חלקות במיוחד ב-DOM.

קוד מקור מלא

הקוד המלא והנוח לשימוש נמצא בקישור למטה! (רק הביאו איתכם Framer Motion ו-Tailwind CSS מותקנים.)

GitHub.

סיכום

בניית אנימציית Boids ב-React אולי נשמעת החלטה מוזרה, אבל עם ספריות אנימציה מודרניות, אתם מקבלים אינטראקטיביות, ביצועים, וחוויית פיתוח יקרה — הכל ביחד.

Categories