SVG Yolları Boyunca Elementleri PathSlider Kütüphanesi ile Canlandırma Rehberi

const path = document.getElementById('myPath');
const elementToAnimate = document.getElementById('myCircle');
const pathLength = path.getTotalLength();

let start = null;

function animate(timestamp) {
  if (!start) start = timestamp;
  const progress = (timestamp - start) / 5000; // 5 saniye animasyon süresi
  const currentLength = progress * pathLength;
  const point = path.getPointAtLength(currentLength);

  elementToAnimate.setAttribute('cx', point.x);
  elementToAnimate.setAttribute('cy', point.y);

  if (progress < 1) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);

npm install pathslider
veya
yarn add pathslider

import PathSlider from 'pathslider';

// PathSlider kodunuz buraya gelecek

, , , veya başka bir element olabilir. Önemli olan, bu elementin de bir id'ye sahip olması veya JavaScript ile seçilebilir olmasıdır.

Bu örnekte, animatedCircle adında kırmızı bir daire oluşturduk.

3. PathSlider'ı Başlatma

PathSlider'ı başlatmak için, PathSlider sınıfının yeni bir örneğini oluşturmanız ve ona SVG yolu ile canlandırılacak elementi sağlamanız gerekir.

const path = document.getElementById('myAnimationPath');
const element = document.getElementById('animatedCircle');

const myPathSlider = new PathSlider(path, element, {
    duration: 3000, // 3 saniye
    easing: 'easeInOutQuad',
    loop: true,
    rotation: true // Elementin yol boyunca dönmesini sağlar
});

myPathSlider.play(); // Animasyonu başlat

Bu temel kurulum ile kırmızı daire, mavi yol boyunca 3 saniyede gidip gelecek ve yol boyunca dönecektir.

Temel Seçenekler

PathSlider, yapılandırma için bir dizi seçenek sunar:

* duration (number, varsayılan: 1000): Animasyonun milisaniye cinsinden süresi.
* easing (string/function, varsayılan: 'linear'): Animasyonun hızlanma/yavaşlama eğrisi. Ön tanımlı birçok seçenek veya özel bir fonksiyon kullanabilirsiniz (örneğin, 'linear', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', vb.).
* loop (boolean, varsayılan: false): Animasyonun sonsuz döngüde oynatılıp oynatılmayacağı.
* direction (string, varsayılan: 'normal'): Animasyonun oynatma yönü ('normal' veya 'reverse').
* offset (number, varsayılan: 0): Elementin yolun başlangıcından ne kadar uzakta başlayacağını belirten 0 ile 1 arasında bir değer (yolun yüzdesi).
* rotation (boolean, varsayılan: false): Elementin yolun teğeti boyunca dönüp dönmeyeceği.
* start (number, varsayılan: 0): Animasyonun yolun hangi noktasından (0-1 arası yüzde) başlayacağını belirler.
* end (number, varsayılan: 1): Animasyonun yolun hangi noktasında (0-1 arası yüzde) biteceğini belirler.

PathSlider Detaylı Seçenekleri ve Özelleştirme

PathSlider, animasyonlarınızı daha da özelleştirmenize olanak tanıyan zengin bir seçenek setine sahiptir.

start ve end

Bu seçenekler, animasyonun yolun hangi bölümünde gerçekleşeceğini kontrol etmenizi sağlar. Değerler 0 (yolun başlangıcı) ile 1 (yolun sonu) arasındadır.

new PathSlider(path, element, {
    duration: 5000,
    start: 0.2, // Yolun %20'sinden başla
    end: 0.8,   // Yolun %80'inde bitir
    loop: true
}).play();

Bu, elementin yolun sadece orta %60'lık kısmında hareket edeceği anlamına gelir.

offset

offset seçeneği, elementin yol üzerindeki başlangıç pozisyonunu ve animasyonun her döngüde nerede başlayacağını belirler. Örneğin, offset: 0.5 ile animasyon yolun tam ortasından başlar.

new PathSlider(path, element, {
    duration: 4000,
    loop: true,
    offset: 0.25 // Animasyonu yolun %25'inden başlat
}).play();

rotation

rotation: true ayarı, elementin yol boyunca hareket ederken yolun teğeti yönünde otomatik olarak dönmesini sağlar. Bu, bir aracın yolda ilerlemesi veya bir ok işaretinin rotayı takip etmesi gibi senaryolarda çok kullanışlıdır.

new PathSlider(path, element, {
    duration: 3000,
    loop: true,
    rotation: true // Element yol boyunca dönecek
}).play();

Eğer elementin varsayılan dönüş açısını ayarlamak isterseniz, CSS transform: rotate() özelliğini kullanarak başlangıç dönüşünü verebilirsiniz. PathSlider, bu başlangıç dönüşüne göre ek dönüş uygular.

scale ve opacity

PathSlider, animasyon sırasında elementin ölçeğini (scale) ve şeffaflığını (opacity) da kontrol etmenize olanak tanır. Bunlar, 0 ile 1 arasında değişen değerlerdir.

new PathSlider(path, element, {
    duration: 4000,
    loop: true,
    scale: [0.5, 1.5], // Animasyon boyunca ölçek 0.5'ten 1.5'e değişir
    opacity: [0.3, 1]  // Animasyon boyunca şeffaflık 0.3'ten 1'e değişir
}).play();

Bu seçenekler bir dizi olarak verildiğinde, PathSlider animasyonun başlangıcında ilk değeri, sonunda ikinci değeri uygular ve aradaki değerleri ara değer olarak hesaplar. Tek bir sayı verildiğinde, o değer sabit kalır.

speedMultiplier

speedMultiplier seçeneği, animasyonun genel hızını çarpansal olarak değiştirir. Örneğin, speedMultiplier: 2 animasyonu iki kat daha hızlı yapar, speedMultiplier: 0.5 ise yarı hızda çalıştırır.

new PathSlider(path, element, {
    duration: 3000,
    loop: true,
    speedMultiplier: 1.5 // Animasyonu %50 daha hızlı yap
}).play();

Geri Çağırım Fonksiyonları (Callbacks)

PathSlider, animasyonun farklı aşamalarında özel kod çalıştırmanıza olanak tanıyan geri çağırım fonksiyonları sunar:

* onStart (function): Animasyon başladığında çağrılır.
* onUpdate (function(progress)): Animasyonun her karesinde çağrılır. progress parametresi, 0 ile 1 arasında animasyonun ilerlemesini gösterir.
* onComplete (function): Animasyon tamamlandığında çağrılır (eğer loop: false ise).

new PathSlider(path, element, {
    duration: 2000,
    onStart: () => console.log('Animasyon başladı!'),
    onUpdate: (progress) => {
        // console.log(İlerleme: ${Math.round(progress * 100)}%);
        // İlerleme çubuğu güncelleme gibi işlemler yapılabilir
    },
    onComplete: () => console.log('Animasyon tamamlandı!')
}).play();

onUpdate geri çağırımı, animasyon sırasında elementin başka özelliklerini dinamik olarak değiştirmek veya kullanıcı arayüzünü güncellemek için oldukça kullanışlıdır.

Birden Fazla Elementi Canlandırma

PathSlider ile birden fazla elementi canlandırmanın iki ana yolu vardır:

1. Tek Bir PathSlider Örneği ile Birden Fazla Element

Eğer birden fazla element aynı SVG yolu üzerinde aynı animasyon ayarlarıyla hareket edecekse, PathSlider'a bir element dizisi sağlayabilirsiniz.

const path = document.getElementById('myAnimationPath');
const elements = [
    document.getElementById('circle1'),
    document.getElementById('circle2'),
    document.getElementById('circle3')
];

new PathSlider(path, elements, {
    duration: 3000,
    loop: true,
    rotation: true
}).play();

Bu durumda, tüm daireler aynı anda ve aynı şekilde hareket edecektir.

2. Birden Fazla PathSlider Örneği ile Farklı Elementler

Eğer her elementin farklı animasyon ayarları (farklı süre, farklı offset, farklı easing vb.) olmasını istiyorsanız, her element için ayrı bir PathSlider örneği oluşturmanız gerekir.

const path = document.getElementById('myAnimationPath');
const circleA = document.getElementById('circleA');
const circleB = document.getElementById('circleB');

// Kırmızı daire: Hızlı, döngüde, yol boyunca döner
new PathSlider(path, circleA, {
    duration: 2000,
    loop: true,
    rotation: true,
    easing: 'easeInSine'
}).play();

// Yeşil daire: Yavaş, farklı bir başlangıç ofsetiyle, döngüde
new PathSlider(path, circleB, {
    duration: 4000,
    loop: true,
    offset: 0.5, // Yolun ortasından başlar
    easing: 'easeOutQuad'
}).play();

Bu yöntem, her element için tam bağımsız kontrol sağlar ve daha karmaşık, çok katmanlı animasyonlar oluşturmanıza olanak tanır.

Etkileşimli Animasyonlar Oluşturma

PathSlider, sadece otomatik animasyonlar değil, aynı zamanda kullanıcı etkileşimleriyle kontrol edilebilen dinamik animasyonlar oluşturmak için de bir API sunar.

PathSlider API'si

PathSlider örneği oluşturduktan sonra, animasyonu programatik olarak kontrol etmek için aşağıdaki metodları kullanabilirsiniz:

* play(): Animasyonu başlatır veya devam ettirir.
* pause(): Animasyonu duraklatır.
* reverse(): Animasyonun oynatma yönünü tersine çevirir.
* seek(progress): Animasyonu belirli bir ilerleme noktasına (0-1 arası) taşır. Animasyon duraklatılmışsa, element o noktaya atlar. Oynatılıyorsa, element o noktadan devam eder.
* stop(): Animasyonu durdurur ve başlangıç pozisyonuna sıfırlar.
* destroy(): PathSlider örneğini temizler, tüm olay dinleyicilerini kaldırır ve elemente uygulanan transformları sıfırlar. Bellek sızıntılarını önlemek için tek sayfa uygulamalarında veya animasyon bittiğinde çağrılması önemlidir.

Kullanıcı Etkileşimleriyle Kontrol

Butonlar, fare hareketleri veya diğer kullanıcı etkileşimleriyle animasyonları kontrol edebilirsiniz.

Oynat
Duraklat
Ters Çevir
Yüzde 50'ye Git

Bu etkileşimli kontrol, kullanıcıların animasyonu kendi hızlarında keşfetmelerine veya belirli noktalara atlamalarına olanak tanır, bu da özellikle eğitim materyallerinde veya interaktif haritalarda faydalıdır.

Gerçek Dünya Senaryoları ve Kullanım Alanları

PathSlider'ın sağladığı kolaylık ve esneklik, onu çeşitli gerçek dünya uygulamaları için ideal hale getirir:

1. Yönlendirmeli Turlar ve Harita Animasyonları

Bir harita üzerinde bir rota boyunca bir aracın, bir kişinin veya bir işaretçinin hareketini canlandırmak için PathSlider mükemmeldir. Kullanıcıların bir güzergahı adım adım takip etmesini sağlayan interaktif turlar oluşturulabilir.

2. Ürün Tanıtımları ve Özellik Vurgulamaları

Bir ürünün farklı parçalarını veya özelliklerini vurgulamak için, elementleri ürünün ana hatları boyunca hareket ettiren animasyonlar kullanılabilir. Örneğin, bir cihazın iç bileşenlerini gösteren bir diyagramda, belirli bir bileşenin yol boyunca hareket ederek özelliklerini açıklayan bir metne ulaşması.

3. Eğitsel ve Bilgilendirici İçerikler

Karmaşık bir sürecin veya kavramın görselleştirilmesi için, PathSlider ile adımları yol boyunca canlandırmak, öğrenmeyi daha ilgi çekici hale getirebilir. Örneğin, bir kimyasal reaksiyonun adımları veya bir veri akışının yolculuğu.

4. Sanatsal ve Yaratıcı Web Tasarımları

Web sitelerine estetik ve dinamik bir dokunuş katmak için, soyut şekillerin veya ikonların belirli yollar boyunca akıcı bir şekilde hareket etmesi sağlanabilir. Bu, sayfa geçişlerinde veya arka plan animasyonlarında kullanılabilir.

5. Veri Görselleştirme

Veri noktalarının veya trendlerin bir yol boyunca canlandırılması, karmaşık veri setlerinin anlaşılmasını kolaylaştırabilir. Örneğin, zaman içindeki bir değişimi gösteren bir grafik üzerinde bir noktanın ilerlemesi.

Performans İpuçları ve En İyi Uygulamalar

Her animasyon kütüphanesinde olduğu gibi, PathSlider kullanırken de performans optimizasyonunu göz önünde bulundurmak önemlidir.

1. SVG Optimizasyonu

* Basit Yollar Kullanın: Mümkün olduğunca karmaşık olmayan ve az sayıda nokta içeren yollar kullanın. Çok fazla Bézier kontrol noktası veya segment, tarayıcının hesaplama yükünü artırabilir.
* viewBox Kullanımı: SVG'nizi viewBox niteliği ile ölçeklenebilir hale getirin. Bu, responsive tasarımlarda SVG'nin daha verimli işlenmesine yardımcı olur.
* Gereksiz Öğeleri Kaldırın: SVG dosyanızdaki gereksiz grupları, boş yolları veya görünmez elementleri temizleyin.

2. Element Seçimi ve DOM Manipülasyonu

* En Az DOM Erişimi: Animasyon döngüsü içinde gereksiz DOM sorgularından kaçının. Element referanslarını bir kez alın ve önbelleğe alın.
* Donanım Hızlandırma: PathSlider, elementlerin konumunu transform: translate() ve transform: rotate() kullanarak ayarlar. Bu, modern tarayıcılarda donanım hızlandırmadan yararlanır ve genellikle top/left gibi CSS özelliklerini değiştirmekten daha performanslıdır. Ancak, canlandırılan elementin will-change: transform özelliğini CSS'e eklemek, tarayıcıya bu elementin değişeceğini önceden bildirerek performansı daha da artırabilir.

#animatedCircle {
    will-change: transform;
}

3. Element Sayısını Dengeleme

Çok sayıda elementi aynı anda canlandırmak performansı düşürebilir. Eğer yüzlerce elementi canlandırmanız gerekiyorsa, WebGL tabanlı çözümleri (üç.js gibi) veya daha düşük seviyeli Canvas API'lerini değerlendirmeniz gerekebilir. PathSlider, genellikle birkaç düzineye kadar element için iyi performans gösterir.

4. Tarayıcı Uyumluluğu

PathSlider modern tarayıcılarla iyi çalışır. Ancak, eski tarayıcılar için (özellikle IE) bazı SVG özelliklerinin veya JavaScript API'lerinin desteği sınırlı olabilir. Projenizin hedef kitlesine göre tarayıcı uyumluluğunu test edin.

5. destroy() Metodunu Kullanma

Tek sayfa uygulamalarında (SPA) veya bir animasyonun ömrü bittiğinde, PathSlider örneğini destroy() metodu ile temizlemek, bellek sızıntılarını önlemek ve gereksiz kaynak kullanımını durdurmak için önemlidir.

Gelişmiş Konular (Kısaca)

PathSlider'ın temel kullanımının ötesinde, daha gelişmiş senaryolar için bazı yaklaşımlar mevcuttur:

1. Özel Easing Fonksiyonları

PathSlider, varsayılan easing fonksiyonlarına ek olarak, kendi özel easing fonksiyonlarınızı da kullanmanıza olanak tanır. Bir easing fonksiyonu, 0 ile 1 arasında bir t (zaman ilerlemesi) değeri alır ve 0 ile 1 arasında bir y (animasyon ilerlemesi) değeri döndürür.

function customEasing(t) {
    return t < 0.5 ? 2  t  t : -1 + (4 - 2  t)  t; // easeInOutQuad örneği
}

new PathSlider(path, element, {
    duration: 3000,
    easing: customEasing
}).play();

2. Diğer Animasyon Kütüphaneleriyle Entegrasyon

PathSlider, elementin yol üzerindeki konumunu ve dönüşünü ayarlarken, diğer animasyon kütüphaneleri (GSAP, Anime.js) elementin diğer özelliklerini (örneğin, rengini, genişliğini) canlandırmak için kullanılabilir. onUpdate geri çağırımı, bu entegrasyon için bir köprü görevi görebilir.

const myPathSlider = new PathSlider(path, element, {
    duration: 3000,
    onUpdate: (progress) => {
        // PathSlider elementin konumunu ve dönüşünü günceller
        // Diğer kütüphanelerle renk değişimi gibi ek animasyonlar yapılabilir
        // element.style.backgroundColor = hsl(${progress * 360}, 70%, 50%);
    }
}).play();

3. Responsive Tasarımda PathSlider Kullanımı

SVG'ler doğaları gereği responsive'dir. viewBox niteliğini kullanarak SVG'nizin boyutunu dinamik olarak ayarlayabilirsiniz. PathSlider, elementlerin konumunu SVG'nin koordinat sistemine göre hesapladığı için, SVG'nizin boyutu değiştiğinde animasyon da otomatik olarak ölçeklenir. Ancak, eğer yolu dinamik olarak yeniden boyutlandırmanız veya değiştirmeniz gerekiyorsa, myPathSlider.destroy() ve ardından yeni yol ile yeni bir PathSlider örneği oluşturmanız gerekebilir.

Sonuç

SVG yolları boyunca elementleri canlandırmak, web sitelerine dinamizm ve etkileşim katmanın güçlü bir yoludur. Geleneksel yöntemler (CSS, SMIL, saf JavaScript) belirli zorluklar ve sınırlamalar sunarken, PathSlider kütüphanesi bu süreci önemli ölçüde basitleştirir. Hafif yapısı, esnek API'si ve kapsamlı seçenekleri ile PathSlider, geliştiricilere karmaşık yol tabanlı animasyonları kolayca oluşturma ve kontrol etme yeteneği sunar.

Bu makalede, PathSlider'ın temel kurulumundan detaylı seçeneklerine, birden fazla elementi canlandırmaktan etkileşimli kontrol mekanizmalarına ve gerçek dünya kullanım senaryolarına kadar geniş bir yelpazeyi ele aldık. Performans ipuçları ve en iyi uygulamalarla birlikte, PathSlider'ı projelerinizde verimli ve etkili bir şekilde kullanmanız için gerekli bilgileri sağlamayı amaçladık. PathSlider, ister basit bir nesne hareketi ister karmaşık bir veri görselleştirmesi olsun, web projelerinize profesyonel ve göz alıcı animasyonlar eklemeniz için güçlü bir araçtır.