React'te Derinlik Algılayan Boids Animasyonu Oluşturma

Tarz ile Sürüler (ve Parallax!)

React'te Derinlik Algılayan Boids Animasyonu Oluşturma: Tarz ile Sürüler (ve Parallax!)

Hoş geldiniz dijital ornitologlar ve meraklı React geliştiriciler! 🪶 Bugün React ve Framer Motion kullanarak nasıl derinlik algılayan, parallax hızında Boids animasyonu oluşturduğuma eğlenceli ve derinlemesine bir dalış yapacağız. Bu, sıradan bir <canvas> boid çorbası değil—bu sürü canlı, dokunmatik tepki veriyor ve sıradaki modern React projenizde tam anlamıyla evinde.

Bu gönderi, animasyonları seven, etkileşim arayan veya sadece açılış sayfasının "Evet, ben kod yazabilirim" diye fısıldamasını isteyen geliştiriciler için.

Boids Nedir Zaten?

Boids, 1986 yılında Craig Reynolds tarafından kuşlar, balıklar ve sürü hareketlerini taklit etmek için icat edilen küçük simüle edilmiş varlıklardır. Sihir üç kuraldan gelir:

  1. Ayrılma: Komşunu sıkıştırma.
  2. Hizalanma: Arkadaşlarının uçtuğu yöne doğru uç.
  3. Birliktelik: Grubun yakınında kal.

Sonuç? Ortaya çıkan canlı sürü davranışı; yaratıcı kodlayıcıların favorisi.

Image boids
Image boids

Neden React Boids İçin?

Geleneksel olarak, boid simülasyonları canvas veya WebGL dünyasında yaşar. Ama günümüzün süper güçlü UI araçları ve Framer Motion gibi kütüphanelerle, DOM düğümlerini verimli şekilde animasyonlu yapabiliriz—ve kolay React entegrasyonu, etkileşim ve hatta kaydırmaya bağlı efektler bonus olarak gelir.

SEO İpucu: Bu yaklaşım, SEO ve erişilebilirliğin önemli olduğu web siteleri ve uygulamalar için harika çalışır—en havalı görsellerinizi erişilemez bir <canvas> içinde saklamanıza gerek kalmaz!

Bileşen Yapısı

Sürü hareket mantığımızı tek bir React bileşeni içinde paketliyoruz: <FlockingAnimation />. Kod modüler ve props aracılığıyla özelleştirilebilir, destekler:

  • Sürü boyutu (otomatik hesaplanabilir veya sabit)
  • Maksimum hız ve kuvvet
  • Kural ağırlıkları
  • Kolay stil için özel sınıflar

Props:

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

Boid Davranışları: Algoritma

Her Boid, konumu, hızı, ivmesi ve—en önemlisi—parallax için derinliği tutan bir sınıf örneğidir.

Temel mantık gerçek hayat sürüsünü taklit eder:

flock(boids, weights, maxSpeed, maxForce) {
  // 1. Ayrılma, hizalanma, birliktelik vektörlerini hesapla
  // 2. Ağırlıklandır ve topla
  // 3. İvmeye uygula
  // 4. İvmeyi maxForce ile sınırla
}

Her kural belirli bir mesafede yakın boidleri inceler ve bir yönlendirme vektörü hesaplar:

  • Ayrılma: Çok yakın boidlerden uzaklaşır.
  • Hizalanma: Yönü eşleştirmek için hızları ortalar.
  • Birliktelik: Ortalama konuma doğru yönlendirme yapar.

Derinlik ve Parallax: Etkileyici Dokunuş

Her boid yaratıldığında rastgele bir derinlik (0 ile 1 arası) atanır. Derinlik üç şey yapar:

  1. Parallax Hızı: Uzak boidler daha yavaş, yakın olanlar daha hızlı hareket eder.
  2. Ölçek: Ön plandaki boidler daha büyüktür.
  3. Opaklık: Derinlik arttıkça şeffaflık artar; yakınlar daha koyu olur.

Bu güncelleme döngüsünde ele alınır:

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

Render edilirken, her boidin ölçeği ve opaklığı derinliğine göre eşlenir, böylece sürü gerçekten 3D görünür. VR'nun tüm sürükleyiciliği, baş ağrısı olmadan.

Duyarlı (ve Eğlenceli) Hale Getirmek!

  • Kaydırmaya Bağlı Solma: useScroll() ve useTransform() kullanarak animasyon kaydırırken soluyor, böylece asla yersiz durmuyor.
  • İşaretçi Etkileşimi: Fare/parmakla sürükleyin, imlecinizde yeni boid oluşur. Çünkü kim sürü yöneticisi gibi hissetmek istemez ki?
  • Rastgele Sürü Dağılımı: Mount olduğunda boidler rastgele merkezlerden ortaya çıkarak doğal bir yayılma gösterir.

Boid spawn örneği:

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)
  );
}

Optimizasyonlar ve Geliştirici İpuçları

  • Görünürlük Algılayan Render: Bileşen görünür olmadığında güncellemeleri durdurmak için Intersection Observer kullanıyoruz, böylece CPU ve pil tasarrufu sağlanıyor—mobil kullanıcılarınız ve dizüstü fanlarınız için.
  • Verimli Durum Güncellemeleri: React durumu sadece gerektiğinde güncelleniyor, render sayısı minimumda tutuluyor.
  • Motion Values: Framer Motion’ın motionValue ve animasyonlu <motion.div> bileşenleriyle DOM’da yumuşak dönüşümlere sahibiz.

Tam Kaynak Kodu

Aşağıdaki bağlantıdan tam ve hazır kodu bulabilirsiniz! (Yalnızca Framer Motion ve Tailwind CSS kurulumunuzu beraber getirin.)

GitHub.

Sonuç

React’te sürü boidleri oluşturmak kulağa garip gelebilir ama modern animasyon kütüphaneleriyle etkileşim, performans ve değerli geliştirici deneyimini hepsi bir arada alırsınız.

Categories