{"id":35847,"date":"2025-12-04T16:40:52","date_gmt":"2025-12-04T13:40:52","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=35847"},"modified":"2025-12-04T16:40:52","modified_gmt":"2025-12-04T13:40:52","slug":"svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/","title":{"rendered":"SVG Yollar\u0131 Boyunca Elementleri PathSlider K\u00fct\u00fcphanesi ile Canland\u0131rma Rehberi"},"content":{"rendered":"

<\/p>\n

SVG Yollar\u0131 Boyunca Elementleri PathSlider K\u00fct\u00fcphanesi ile Canland\u0131rma Rehberi<\/h2>\n

Giri\u015f<\/h2>\n

Web teknolojilerinin geli\u015fmesiyle birlikte, kullan\u0131c\u0131 deneyimini zenginle\u015ftiren ve etkile\u015fimi art\u0131ran dinamik ve g\u00f6rsel a\u00e7\u0131dan \u00e7ekici i\u00e7eriklere olan talep artm\u0131\u015ft\u0131r. Bu ba\u011flamda, Scalable Vector Graphics (SVG) format\u0131, vekt\u00f6r tabanl\u0131 grafikleri web sayfalar\u0131na entegre etmek i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7 olarak \u00f6ne \u00e7\u0131kmaktad\u0131r. SVG’nin en etkileyici \u00f6zelliklerinden biri, grafikleri canland\u0131rabilme yetene\u011fidir. \u00d6zellikle, elementleri belirli bir yol boyunca hareket ettirme animasyonlar\u0131, harita \u00fczerinde bir rotay\u0131 g\u00f6stermekten, \u00fcr\u00fcn tan\u0131t\u0131mlar\u0131na veya sanatsal web tasar\u0131mlar\u0131na kadar geni\u015f bir kullan\u0131m alan\u0131na sahiptir.<\/p>\n

Geleneksel olarak, bu t\u00fcr yol tabanl\u0131 animasyonlar\u0131 saf JavaScript, CSS veya SMIL (Synchronized Multimedia Integration Language) kullanarak uygulamak m\u00fcmk\u00fcnd\u00fcr. Ancak bu y\u00f6ntemler genellikle karma\u015f\u0131k hesaplamalar, taray\u0131c\u0131 uyumlulu\u011fu sorunlar\u0131 veya s\u0131n\u0131rl\u0131 kontrol mekanizmalar\u0131 gibi zorluklar\u0131 beraberinde getirir. \u0130\u015fte tam bu noktada, PathSlider gibi \u00f6zel olarak bu g\u00f6revi basitle\u015ftirmek i\u00e7in tasarlanm\u0131\u015f k\u00fct\u00fcphaneler devreye girer. PathSlider, SVG yollar\u0131 boyunca herhangi bir HTML veya SVG elementini sorunsuz bir \u015fekilde canland\u0131rman\u0131za olanak tan\u0131yan hafif ve esnek bir JavaScript k\u00fct\u00fcphanesidir. Bu makale, PathSlider k\u00fct\u00fcphanesini kullanarak SVG yollar\u0131 boyunca elementleri nas\u0131l canland\u0131raca\u011f\u0131n\u0131z\u0131 ayr\u0131nt\u0131l\u0131 bir \u015fekilde ele alacakt\u0131r.<\/p>\n

SVG Yollar\u0131na Genel Bak\u0131\u015f<\/h2>\n

PathSlider’\u0131n temelinde SVG yollar\u0131 yatt\u0131\u011f\u0131 i\u00e7in, \u00f6ncelikle SVG yollar\u0131n\u0131n ne oldu\u011funu ve nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak \u00f6nemlidir.<\/p>\n

SVG Nedir?<\/h3>\n

SVG, W3C taraf\u0131ndan geli\u015ftirilmi\u015f, XML tabanl\u0131 bir vekt\u00f6r grafik format\u0131d\u0131r. G\u00f6r\u00fcnt\u00fcleri piksel yerine matematiksel denklemlerle tan\u0131mlad\u0131\u011f\u0131 i\u00e7in, herhangi bir \u00e7\u00f6z\u00fcn\u00fcrl\u00fckte kaliteden \u00f6d\u00fcn vermeden \u00f6l\u00e7eklenebilirler. Metin tabanl\u0131 olmas\u0131, arama motorlar\u0131 taraf\u0131ndan indekslenebilmesini ve CSS veya JavaScript ile kolayca manip\u00fcle edilebilmesini sa\u011flar.<\/p>\n

<\/code> Elementi ve d<\/code> Niteli\u011fi<\/h3>\n

SVG’deki en g\u00fc\u00e7l\u00fc ve esnek \u00e7izim elementlerinden biri <\/code> elementidir. Bu element, \u00e7izgiler, e\u011friler, yaylar ve daha fazlas\u0131n\u0131 i\u00e7eren karma\u015f\u0131k \u015fekiller olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. <\/code> elementinin davran\u0131\u015f\u0131n\u0131 belirleyen ana nitelik d<\/code> (data) niteli\u011fidir. d<\/code> niteli\u011fi, bir dizi komut ve koordinat \u00e7ifti i\u00e7erir. \u0130\u015fte baz\u0131 temel d<\/code> komutlar\u0131:<\/p>\n

* M (moveto):<\/strong> Kalemi belirtilen koordinatlara ta\u015f\u0131r. Bir yolun ba\u015flang\u0131\u00e7 noktas\u0131n\u0131 belirler. M x y<\/code> (mutlak) veya m dx dy<\/code> (g\u00f6receli).
\n* L (lineto):<\/strong> Kalemden belirtilen koordinatlara d\u00fcz bir \u00e7izgi \u00e7izer. L x y<\/code> veya l dx dy<\/code>.
\n* H (horizontal lineto):<\/strong> Sadece yatay bir \u00e7izgi \u00e7izer. H x<\/code> veya h dx<\/code>.
\n* V (vertical lineto):<\/strong> Sadece dikey bir \u00e7izgi \u00e7izer. V y<\/code> veya v dy<\/code>.
\n* C (curveto):<\/strong> \u00dc\u00e7\u00fcnc\u00fc derece B\u00e9zier e\u011frisi \u00e7izer. \u0130ki kontrol noktas\u0131 ve bir biti\u015f noktas\u0131 gerektirir. C x1 y1, x2 y2, x y<\/code>.
\n* S (smooth curveto):<\/strong> \u00d6nceki e\u011friye g\u00f6re simetrik bir \u00fc\u00e7\u00fcnc\u00fc derece B\u00e9zier e\u011frisi \u00e7izer. Bir kontrol noktas\u0131 ve bir biti\u015f noktas\u0131 gerektirir. S x2 y2, x y<\/code>.
\n* Q (quadratic B\u00e9zier curveto):<\/strong> \u0130kinci derece B\u00e9zier e\u011frisi \u00e7izer. Bir kontrol noktas\u0131 ve bir biti\u015f noktas\u0131 gerektirir. Q x1 y1, x y<\/code>.
\n* T (smooth quadratic B\u00e9zier curveto):<\/strong> \u00d6nceki e\u011friye g\u00f6re simetrik bir ikinci derece B\u00e9zier e\u011frisi \u00e7izer. Bir biti\u015f noktas\u0131 gerektirir. T x y<\/code>.
\n* A (elliptical arc):<\/strong> Elips yaylar\u0131 \u00e7izer. A rx ry x-axis-rotation large-arc-flag sweep-flag x y<\/code>.
\n* Z (closepath):<\/strong> Yolu ba\u015flang\u0131\u00e7 noktas\u0131na kapat\u0131r, d\u00fcz bir \u00e7izgi \u00e7izer.<\/p>\n

Bu komutlar, SVG yollar\u0131n\u0131n karma\u015f\u0131k geometrilerini tan\u0131mlamam\u0131z\u0131 sa\u011flar. PathSlider, bu d<\/code> niteli\u011fini analiz ederek elementleri bu yol boyunca hareket ettirir.<\/p>\n

Geleneksel SVG Animasyon Y\u00f6ntemleri ve S\u0131n\u0131rlamalar\u0131<\/h2>\n

PathSlider’\u0131n de\u011ferini daha iyi anlamak i\u00e7in, SVG animasyonlar\u0131n\u0131 ger\u00e7ekle\u015ftirmenin di\u011fer y\u00f6ntemlerine ve bunlar\u0131n kar\u015f\u0131la\u015ft\u0131\u011f\u0131 zorluklara k\u0131saca de\u011finelim.<\/p>\n

CSS Animasyonlar\u0131<\/h3>\n

CSS, transform<\/code> ve transition<\/code> \u00f6zellikleri ile elementleri canland\u0131rmak i\u00e7in olduk\u00e7a g\u00fc\u00e7l\u00fcd\u00fcr. SVG elementlerine de uygulanabilir. Ancak, elementleri belirli bir SVG yolu boyunca hareket ettirmek i\u00e7in, her bir anahtar karede (keyframe) elementin yol \u00fczerindeki konumunu ve d\u00f6n\u00fc\u015f\u00fcn\u00fc manuel olarak hesaplaman\u0131z gerekir. Bu, \u00f6zellikle karma\u015f\u0131k yollar veya hassas animasyonlar i\u00e7in son derece zahmetli ve hataya a\u00e7\u0131k bir s\u00fcre\u00e7tir. Ayr\u0131ca, yolun uzunlu\u011funu ve yol \u00fczerindeki noktalar\u0131n koordinatlar\u0131n\u0131 dinamik olarak elde etmek CSS ile m\u00fcmk\u00fcn de\u011fildir.<\/p>\n

SMIL (Synchronized Multimedia Integration Language)<\/h3>\n

SMIL, SVG i\u00e7erisinde do\u011frudan animasyonlar\u0131 tan\u0131mlamak i\u00e7in kullan\u0131lan bir XML tabanl\u0131 dildir. <\/code> gibi etiketler, bir elementin bir yol boyunca hareket etmesini sa\u011flamak i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015ft\u0131r.<\/p>\n

\n  \n  \n    \n      \n    <\/animateMotion>\n  <\/circle>\n<\/svg><\/code><\/pre>\n
SMIL g\u00fc\u00e7l\u00fc olsa da, modern web geli\u015ftirme ortam\u0131nda baz\u0131 dezavantajlar\u0131 vard\u0131r:
\n*   Taray\u0131c\u0131 Deste\u011fi:<\/strong> \u00d6zellikle Chrome ve Firefox gibi pop\u00fcler taray\u0131c\u0131lar SMIL deste\u011fini a\u015famal\u0131 olarak kald\u0131rm\u0131\u015f veya s\u0131n\u0131rlam\u0131\u015ft\u0131r. Bu, \u00e7apraz taray\u0131c\u0131 uyumlulu\u011fu a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck bir sorun te\u015fkil eder.
\n*   JavaScript ile Etkile\u015fim:<\/strong> SMIL animasyonlar\u0131n\u0131 JavaScript ile dinamik olarak kontrol etmek (durdurma, ba\u015flatma, h\u0131z de\u011fi\u015ftirme) genellikle daha karma\u015f\u0131kt\u0131r.
\n*   Esneklik Eksikli\u011fi:<\/strong> Belirli bir yol \u00fczerinde birden fazla elementin farkl\u0131 h\u0131zlarda hareket etmesi veya yolun belirli b\u00f6l\u00fcmlerinde farkl\u0131 davran\u0131\u015flar sergilemesi gibi geli\u015fmi\u015f senaryolar SMIL ile zorlay\u0131c\u0131 olabilir.<\/p>\n
Saf JavaScript ile Manuel Hesaplamalar<\/h3>\n
JavaScript, DOM manip\u00fclasyonu ve matematiksel hesaplamalar yoluyla en esnek animasyon y\u00f6ntemini sunar. Bir SVG yolu boyunca elementleri hareket ettirmek i\u00e7in, yolun toplam uzunlu\u011funu hesaplaman\u0131z (getTotalLength()<\/code>) ve ard\u0131ndan getPointAtLength()<\/code> metodunu kullanarak yolun belirli bir y\u00fczdesindeki veya uzunlu\u011fundaki noktan\u0131n koordinatlar\u0131n\u0131 alman\u0131z gerekir.<\/p>\n
const path = document.getElementById('myPath');\nconst elementToAnimate = document.getElementById('myCircle');\nconst pathLength = path.getTotalLength();\n\nlet start = null;\n\nfunction animate(timestamp) {\n  if (!start) start = timestamp;\n  const progress = (timestamp - start) \/ 5000; \/\/ 5 saniye animasyon s\u00fcresi\n  const currentLength = progress * pathLength;\n  const point = path.getPointAtLength(currentLength);\n\n  elementToAnimate.setAttribute('cx', point.x);\n  elementToAnimate.setAttribute('cy', point.y);\n\n  if (progress < 1) {\n    requestAnimationFrame(animate);\n  }\n}\n\nrequestAnimationFrame(animate);<\/code><\/pre>\n
Bu y\u00f6ntem, en fazla kontrol\u00fc sa\u011flasa da, animasyon d\u00f6ng\u00fcs\u00fc y\u00f6netimi, easing<\/code> fonksiyonlar\u0131, elementin yol \u00fczerindeki d\u00f6n\u00fc\u015f\u00fcn\u00fc hesaplama, performans optimizasyonu ve etkile\u015fim ekleme gibi bir\u00e7ok detay\u0131 manuel olarak ele almay\u0131 gerektirir. Bu da geli\u015ftirme s\u00fcresini art\u0131r\u0131r ve hata olas\u0131l\u0131\u011f\u0131n\u0131 y\u00fckseltir.<\/p>\n
PathSlider K\u00fct\u00fcphanesine Giri\u015f<\/h2>\n
Yukar\u0131da belirtilen s\u0131n\u0131rlamalar g\u00f6z \u00f6n\u00fcne al\u0131nd\u0131\u011f\u0131nda, PathSlider gibi bir k\u00fct\u00fcphane, SVG yol tabanl\u0131 animasyonlar\u0131 basitle\u015ftirmek i\u00e7in g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcm sunar. PathSlider, temel olarak \u015funlar\u0131 yapar:<\/p>\n
*   Yol Analizi:<\/strong> Verilen SVG yolunun geometrisini analiz eder ve elementlerin yol boyunca hareketini sa\u011flayacak matematiksel hesaplamalar\u0131 otomatik olarak ger\u00e7ekle\u015ftirir.
\n*   Element Konumland\u0131rma:<\/strong> Her animasyon karesinde, canland\u0131r\u0131lacak elementin yol \u00fczerindeki do\u011fru konumunu ve iste\u011fe ba\u011fl\u0131 olarak d\u00f6n\u00fc\u015f\u00fcn\u00fc hesaplar ve uygular.
\n*   Animasyon Kontrol\u00fc:<\/strong> Animasyon s\u00fcresi, kolayla\u015ft\u0131rma (easing) fonksiyonlar\u0131, d\u00f6ng\u00fc (loop), y\u00f6n (direction) gibi temel animasyon \u00f6zelliklerini kolayca yap\u0131land\u0131rman\u0131za olanak tan\u0131r.
\n*   Hafif ve Ba\u011f\u0131ms\u0131z:<\/strong> Genellikle di\u011fer b\u00fcy\u00fck k\u00fct\u00fcphanelere ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 yoktur ve k\u00fc\u00e7\u00fck dosya boyutuyla performans\u0131 etkilemez.<\/p>\n
PathSlider'\u0131n temel felsefesi, geli\u015ftiricilerin karma\u015f\u0131k matematiksel detaylarla u\u011fra\u015fmak yerine, yarat\u0131c\u0131 animasyonlar olu\u015fturmaya odaklanmas\u0131n\u0131 sa\u011flamakt\u0131r.<\/p>\n
PathSlider Kurulumu<\/h2>\n
PathSlider'\u0131 projenize dahil etmek olduk\u00e7a basittir. \u0130ki ana y\u00f6ntem bulunmaktad\u0131r: CDN \u00fczerinden veya paket y\u00f6neticileri (npm\/yarn) arac\u0131l\u0131\u011f\u0131yla.<\/p>\n
CDN \u00dczerinden Kurulum<\/h3>\n
En h\u0131zl\u0131 ve en kolay y\u00f6ntem, PathSlider'\u0131 do\u011frudan bir Content Delivery Network (CDN) \u00fczerinden HTML dosyan\u0131za eklemektir. Bu, \u00f6zellikle k\u00fc\u00e7\u00fck projeler veya h\u0131zl\u0131 prototipleme i\u00e7in idealdir.<\/p>\n
\n\n\n    \n    \n    PathSlider \u00d6rne\u011fi<\/title>\n<\/head>\n<body>\n\n    <!-- SVG ve canland\u0131r\u0131lacak elementler buraya gelecek -->\n\n    <script src=\"https:\/\/unpkg.com\/pathslider@latest\/dist\/pathslider.min.js\"><\/script>\n    <script>\n        \/\/ PathSlider kodunuz buraya gelecek\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p><code>unpkg.com<\/code> adresinden en g\u00fcncel PathSlider s\u00fcr\u00fcm\u00fcn\u00fc alabilirsiniz.<\/p>\n<h3>npm veya Yarn ile Kurulum<\/h3>\n<p>E\u011fer bir JavaScript \u00e7er\u00e7evesi (React, Vue, Angular) veya bir mod\u00fcl paketleyici (Webpack, Rollup) kullan\u0131yorsan\u0131z, PathSlider'\u0131 projenizin ba\u011f\u0131ml\u0131l\u0131klar\u0131na eklemek i\u00e7in npm veya Yarn kullanabilirsiniz.<\/p>\n<pre><code class=\"language-bash\">npm install pathslider\n<h2>veya<\/h2>\nyarn add pathslider<\/code><\/pre>\n<p>Kurulumdan sonra, JavaScript dosyan\u0131zda k\u00fct\u00fcphaneyi i\u00e7e aktarabilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">import PathSlider from 'pathslider';\n\n\/\/ PathSlider kodunuz buraya gelecek<\/code><\/pre>\n<h2>PathSlider Temel Kullan\u0131m\u0131<\/h2>\n<p>PathSlider ile bir animasyon olu\u015fturmak i\u00e7in birka\u00e7 temel ad\u0131m\u0131 izlemeniz gerekir:<\/p>\n<h3>1. SVG Yolu Olu\u015fturma<\/h3>\n<p>\u00d6ncelikle, elementinizin \u00fczerinde hareket edece\u011fi bir SVG yolu tan\u0131mlay\u0131n. Bu yolun bir <code>id<\/code> niteli\u011fi olmas\u0131, JavaScript'ten kolayca eri\u015febilmeniz i\u00e7in iyi bir uygulamad\u0131r.<\/p>\n<pre><code class=\"language-html\"><svg width=\"400\" height=\"200\" viewBox=\"0 0 400 200\">\n    <path id=\"myAnimationPath\" d=\"M10 100 Q 100 0, 200 100 T 390 100\" stroke=\"blue\" stroke-width=\"2\" fill=\"none\"\/>\n<\/svg><\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>myAnimationPath<\/code> ad\u0131nda bir B\u00e9zier e\u011frisi tan\u0131mlad\u0131k. <code>stroke<\/code> ve <code>stroke-width<\/code> nitelikleri yolu g\u00f6r\u00fcn\u00fcr k\u0131lar; <code>fill=\"none\"<\/code> ise yolun i\u00e7ini doldurmaz.<\/p>\n<h3>2. Canland\u0131r\u0131lacak Elementi Haz\u0131rlama<\/h3>\n<p>Ard\u0131ndan, bu yol boyunca hareket ettirmek istedi\u011finiz HTML veya SVG elementini haz\u0131rlay\u0131n. Bu bir <code><\/p>\n<div><\/code>, <code><img><\/code>, <code><circle><\/code>, <code><rect><\/code> veya ba\u015fka bir element olabilir. \u00d6nemli olan, bu elementin de bir <code>id<\/code>'ye sahip olmas\u0131 veya JavaScript ile se\u00e7ilebilir olmas\u0131d\u0131r.<\/p>\n<pre><code class=\"language-html\"><svg width=\"400\" height=\"200\" viewBox=\"0 0 400 200\">\n    <path id=\"myAnimationPath\" d=\"M10 100 Q 100 0, 200 100 T 390 100\" stroke=\"blue\" stroke-width=\"2\" fill=\"none\"\/>\n    <circle id=\"animatedCircle\" r=\"10\" fill=\"red\"\/>\n<\/svg><\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>animatedCircle<\/code> ad\u0131nda k\u0131rm\u0131z\u0131 bir daire olu\u015fturduk.<\/p>\n<h3>3. PathSlider'\u0131 Ba\u015flatma<\/h3>\n<p>PathSlider'\u0131 ba\u015flatmak i\u00e7in, <code>PathSlider<\/code> s\u0131n\u0131f\u0131n\u0131n yeni bir \u00f6rne\u011fini olu\u015fturman\u0131z ve ona SVG yolu ile canland\u0131r\u0131lacak elementi sa\u011flaman\u0131z gerekir.<\/p>\n<pre><code class=\"language-javascript\">const path = document.getElementById('myAnimationPath');\nconst element = document.getElementById('animatedCircle');\n\nconst myPathSlider = new PathSlider(path, element, {\n    duration: 3000, \/\/ 3 saniye\n    easing: 'easeInOutQuad',\n    loop: true,\n    rotation: true \/\/ Elementin yol boyunca d\u00f6nmesini sa\u011flar\n});\n\nmyPathSlider.play(); \/\/ Animasyonu ba\u015flat<\/code><\/pre>\n<p>Bu temel kurulum ile k\u0131rm\u0131z\u0131 daire, mavi yol boyunca 3 saniyede gidip gelecek ve yol boyunca d\u00f6necektir.<\/p>\n<h3>Temel Se\u00e7enekler<\/h3>\n<p>PathSlider, yap\u0131land\u0131rma i\u00e7in bir dizi se\u00e7enek sunar:<\/p>\n<p>*   <strong><code>duration<\/code> (number, varsay\u0131lan: 1000):<\/strong> Animasyonun milisaniye cinsinden s\u00fcresi.<br \/>\n*   <strong><code>easing<\/code> (string\/function, varsay\u0131lan: 'linear'):<\/strong> Animasyonun h\u0131zlanma\/yava\u015flama e\u011frisi. \u00d6n tan\u0131ml\u0131 bir\u00e7ok se\u00e7enek veya \u00f6zel bir fonksiyon kullanabilirsiniz (\u00f6rne\u011fin, 'linear', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', vb.).<br \/>\n*   <strong><code>loop<\/code> (boolean, varsay\u0131lan: false):<\/strong> Animasyonun sonsuz d\u00f6ng\u00fcde oynat\u0131l\u0131p oynat\u0131lmayaca\u011f\u0131.<br \/>\n*   <strong><code>direction<\/code> (string, varsay\u0131lan: 'normal'):<\/strong> Animasyonun oynatma y\u00f6n\u00fc ('normal' veya 'reverse').<br \/>\n*   <strong><code>offset<\/code> (number, varsay\u0131lan: 0):<\/strong> Elementin yolun ba\u015flang\u0131c\u0131ndan ne kadar uzakta ba\u015flayaca\u011f\u0131n\u0131 belirten 0 ile 1 aras\u0131nda bir de\u011fer (yolun y\u00fczdesi).<br \/>\n*   <strong><code>rotation<\/code> (boolean, varsay\u0131lan: false):<\/strong> Elementin yolun te\u011feti boyunca d\u00f6n\u00fcp d\u00f6nmeyece\u011fi.<br \/>\n*   <strong><code>start<\/code> (number, varsay\u0131lan: 0):<\/strong> Animasyonun yolun hangi noktas\u0131ndan (0-1 aras\u0131 y\u00fczde) ba\u015flayaca\u011f\u0131n\u0131 belirler.<br \/>\n*   <strong><code>end<\/code> (number, varsay\u0131lan: 1):<\/strong> Animasyonun yolun hangi noktas\u0131nda (0-1 aras\u0131 y\u00fczde) bitece\u011fini belirler.<\/p>\n<h2>PathSlider Detayl\u0131 Se\u00e7enekleri ve \u00d6zelle\u015ftirme<\/h2>\n<p>PathSlider, animasyonlar\u0131n\u0131z\u0131 daha da \u00f6zelle\u015ftirmenize olanak tan\u0131yan zengin bir se\u00e7enek setine sahiptir.<\/p>\n<h3><code>start<\/code> ve <code>end<\/code><\/h3>\n<p>Bu se\u00e7enekler, animasyonun yolun hangi b\u00f6l\u00fcm\u00fcnde ger\u00e7ekle\u015fece\u011fini kontrol etmenizi sa\u011flar. De\u011ferler 0 (yolun ba\u015flang\u0131c\u0131) ile 1 (yolun sonu) aras\u0131ndad\u0131r.<\/p>\n<pre><code class=\"language-javascript\">new PathSlider(path, element, {\n    duration: 5000,\n    start: 0.2, \/\/ Yolun %20'sinden ba\u015fla\n    end: 0.8,   \/\/ Yolun %80'inde bitir\n    loop: true\n}).play();<\/code><\/pre>\n<p>Bu, elementin yolun sadece orta %60'l\u0131k k\u0131sm\u0131nda hareket edece\u011fi anlam\u0131na gelir.<\/p>\n<h3><code>offset<\/code><\/h3>\n<p><code>offset<\/code> se\u00e7ene\u011fi, elementin yol \u00fczerindeki ba\u015flang\u0131\u00e7 pozisyonunu ve animasyonun her d\u00f6ng\u00fcde nerede ba\u015flayaca\u011f\u0131n\u0131 belirler. \u00d6rne\u011fin, <code>offset: 0.5<\/code> ile animasyon yolun tam ortas\u0131ndan ba\u015flar.<\/p>\n<pre><code class=\"language-javascript\">new PathSlider(path, element, {\n    duration: 4000,\n    loop: true,\n    offset: 0.25 \/\/ Animasyonu yolun %25'inden ba\u015flat\n}).play();<\/code><\/pre>\n<h3><code>rotation<\/code><\/h3>\n<p><code>rotation: true<\/code> ayar\u0131, elementin yol boyunca hareket ederken yolun te\u011feti y\u00f6n\u00fcnde otomatik olarak d\u00f6nmesini sa\u011flar. Bu, bir arac\u0131n yolda ilerlemesi veya bir ok i\u015faretinin rotay\u0131 takip etmesi gibi senaryolarda \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<pre><code class=\"language-javascript\">new PathSlider(path, element, {\n    duration: 3000,\n    loop: true,\n    rotation: true \/\/ Element yol boyunca d\u00f6necek\n}).play();<\/code><\/pre>\n<p>E\u011fer elementin varsay\u0131lan d\u00f6n\u00fc\u015f a\u00e7\u0131s\u0131n\u0131 ayarlamak isterseniz, CSS <code>transform: rotate()<\/code> \u00f6zelli\u011fini kullanarak ba\u015flang\u0131\u00e7 d\u00f6n\u00fc\u015f\u00fcn\u00fc verebilirsiniz. PathSlider, bu ba\u015flang\u0131\u00e7 d\u00f6n\u00fc\u015f\u00fcne g\u00f6re ek d\u00f6n\u00fc\u015f uygular.<\/p>\n<h3><code>scale<\/code> ve <code>opacity<\/code><\/h3>\n<p>PathSlider, animasyon s\u0131ras\u0131nda elementin \u00f6l\u00e7e\u011fini (<code>scale<\/code>) ve \u015feffafl\u0131\u011f\u0131n\u0131 (<code>opacity<\/code>) da kontrol etmenize olanak tan\u0131r. Bunlar, 0 ile 1 aras\u0131nda de\u011fi\u015fen de\u011ferlerdir.<\/p>\n<pre><code class=\"language-javascript\">new PathSlider(path, element, {\n    duration: 4000,\n    loop: true,\n    scale: [0.5, 1.5], \/\/ Animasyon boyunca \u00f6l\u00e7ek 0.5'ten 1.5'e de\u011fi\u015fir\n    opacity: [0.3, 1]  \/\/ Animasyon boyunca \u015feffafl\u0131k 0.3'ten 1'e de\u011fi\u015fir\n}).play();<\/code><\/pre>\n<p>Bu se\u00e7enekler bir dizi olarak verildi\u011finde, PathSlider animasyonun ba\u015flang\u0131c\u0131nda ilk de\u011feri, sonunda ikinci de\u011feri uygular ve aradaki de\u011ferleri ara de\u011fer olarak hesaplar. Tek bir say\u0131 verildi\u011finde, o de\u011fer sabit kal\u0131r.<\/p>\n<h3><code>speedMultiplier<\/code><\/h3>\n<p><code>speedMultiplier<\/code> se\u00e7ene\u011fi, animasyonun genel h\u0131z\u0131n\u0131 \u00e7arpansal olarak de\u011fi\u015ftirir. \u00d6rne\u011fin, <code>speedMultiplier: 2<\/code> animasyonu iki kat daha h\u0131zl\u0131 yapar, <code>speedMultiplier: 0.5<\/code> ise yar\u0131 h\u0131zda \u00e7al\u0131\u015ft\u0131r\u0131r.<\/p>\n<pre><code class=\"language-javascript\">new PathSlider(path, element, {\n    duration: 3000,\n    loop: true,\n    speedMultiplier: 1.5 \/\/ Animasyonu %50 daha h\u0131zl\u0131 yap\n}).play();<\/code><\/pre>\n<h3>Geri \u00c7a\u011f\u0131r\u0131m Fonksiyonlar\u0131 (Callbacks)<\/h3>\n<p>PathSlider, animasyonun farkl\u0131 a\u015famalar\u0131nda \u00f6zel kod \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131yan geri \u00e7a\u011f\u0131r\u0131m fonksiyonlar\u0131 sunar:<\/p>\n<p>*   <strong><code>onStart<\/code> (function):<\/strong> Animasyon ba\u015flad\u0131\u011f\u0131nda \u00e7a\u011fr\u0131l\u0131r.<br \/>\n*   <strong><code>onUpdate<\/code> (function(progress)):<\/strong> Animasyonun her karesinde \u00e7a\u011fr\u0131l\u0131r. <code>progress<\/code> parametresi, 0 ile 1 aras\u0131nda animasyonun ilerlemesini g\u00f6sterir.<br \/>\n*   <strong><code>onComplete<\/code> (function):<\/strong> Animasyon tamamland\u0131\u011f\u0131nda \u00e7a\u011fr\u0131l\u0131r (e\u011fer <code>loop: false<\/code> ise).<\/p>\n<pre><code class=\"language-javascript\">new PathSlider(path, element, {\n    duration: 2000,\n    onStart: () => console.log('Animasyon ba\u015flad\u0131!'),\n    onUpdate: (progress) => {\n        \/\/ console.log(<code>\u0130lerleme: ${Math.round(progress * 100)}%<\/code>);\n        \/\/ \u0130lerleme \u00e7ubu\u011fu g\u00fcncelleme gibi i\u015flemler yap\u0131labilir\n    },\n    onComplete: () => console.log('Animasyon tamamland\u0131!')\n}).play();<\/code><\/pre>\n<p><code>onUpdate<\/code> geri \u00e7a\u011f\u0131r\u0131m\u0131, animasyon s\u0131ras\u0131nda elementin ba\u015fka \u00f6zelliklerini dinamik olarak de\u011fi\u015ftirmek veya kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc g\u00fcncellemek i\u00e7in olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<h2>Birden Fazla Elementi Canland\u0131rma<\/h2>\n<p>PathSlider ile birden fazla elementi canland\u0131rman\u0131n iki ana yolu vard\u0131r:<\/p>\n<h3>1. Tek Bir PathSlider \u00d6rne\u011fi ile Birden Fazla Element<\/h3>\n<p>E\u011fer birden fazla element ayn\u0131 SVG yolu \u00fczerinde ayn\u0131 animasyon ayarlar\u0131yla hareket edecekse, PathSlider'a bir element dizisi sa\u011flayabilirsiniz.<\/p>\n<pre><code class=\"language-html\"><svg width=\"400\" height=\"200\" viewBox=\"0 0 400 200\">\n    <path id=\"myAnimationPath\" d=\"M10 100 Q 100 0, 200 100 T 390 100\" stroke=\"blue\" stroke-width=\"2\" fill=\"none\"\/>\n    <circle id=\"circle1\" r=\"8\" fill=\"red\"\/>\n    <circle id=\"circle2\" r=\"8\" fill=\"green\"\/>\n    <circle id=\"circle3\" r=\"8\" fill=\"purple\"\/>\n<\/svg><\/code><\/pre>\n<pre><code class=\"language-javascript\">const path = document.getElementById('myAnimationPath');\nconst elements = [\n    document.getElementById('circle1'),\n    document.getElementById('circle2'),\n    document.getElementById('circle3')\n];\n\nnew PathSlider(path, elements, {\n    duration: 3000,\n    loop: true,\n    rotation: true\n}).play();<\/code><\/pre>\n<p>Bu durumda, t\u00fcm daireler ayn\u0131 anda ve ayn\u0131 \u015fekilde hareket edecektir.<\/p>\n<h3>2. Birden Fazla PathSlider \u00d6rne\u011fi ile Farkl\u0131 Elementler<\/h3>\n<p>E\u011fer her elementin farkl\u0131 animasyon ayarlar\u0131 (farkl\u0131 s\u00fcre, farkl\u0131 <code>offset<\/code>, farkl\u0131 <code>easing<\/code> vb.) olmas\u0131n\u0131 istiyorsan\u0131z, her element i\u00e7in ayr\u0131 bir PathSlider \u00f6rne\u011fi olu\u015fturman\u0131z gerekir.<\/p>\n<pre><code class=\"language-html\"><svg width=\"400\" height=\"200\" viewBox=\"0 0 400 200\">\n    <path id=\"myAnimationPath\" d=\"M10 100 Q 100 0, 200 100 T 390 100\" stroke=\"blue\" stroke-width=\"2\" fill=\"none\"\/>\n    <circle id=\"circleA\" r=\"8\" fill=\"red\"\/>\n    <circle id=\"circleB\" r=\"8\" fill=\"green\"\/>\n<\/svg><\/code><\/pre>\n<pre><code class=\"language-javascript\">const path = document.getElementById('myAnimationPath');\nconst circleA = document.getElementById('circleA');\nconst circleB = document.getElementById('circleB');\n\n\/\/ K\u0131rm\u0131z\u0131 daire: H\u0131zl\u0131, d\u00f6ng\u00fcde, yol boyunca d\u00f6ner\nnew PathSlider(path, circleA, {\n    duration: 2000,\n    loop: true,\n    rotation: true,\n    easing: 'easeInSine'\n}).play();\n\n\/\/ Ye\u015fil daire: Yava\u015f, farkl\u0131 bir ba\u015flang\u0131\u00e7 ofsetiyle, d\u00f6ng\u00fcde\nnew PathSlider(path, circleB, {\n    duration: 4000,\n    loop: true,\n    offset: 0.5, \/\/ Yolun ortas\u0131ndan ba\u015flar\n    easing: 'easeOutQuad'\n}).play();<\/code><\/pre>\n<p>Bu y\u00f6ntem, her element i\u00e7in tam ba\u011f\u0131ms\u0131z kontrol sa\u011flar ve daha karma\u015f\u0131k, \u00e7ok katmanl\u0131 animasyonlar olu\u015fturman\u0131za olanak tan\u0131r.<\/p>\n<h2>Etkile\u015fimli Animasyonlar Olu\u015fturma<\/h2>\n<p>PathSlider, sadece otomatik animasyonlar de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 etkile\u015fimleriyle kontrol edilebilen dinamik animasyonlar olu\u015fturmak i\u00e7in de bir API sunar.<\/p>\n<h3>PathSlider API'si<\/h3>\n<p>PathSlider \u00f6rne\u011fi olu\u015fturduktan sonra, animasyonu programatik olarak kontrol etmek i\u00e7in a\u015fa\u011f\u0131daki metodlar\u0131 kullanabilirsiniz:<\/p>\n<p>*   <strong><code>play()<\/code>:<\/strong> Animasyonu ba\u015flat\u0131r veya devam ettirir.<br \/>\n*   <strong><code>pause()<\/code>:<\/strong> Animasyonu duraklat\u0131r.<br \/>\n*   <strong><code>reverse()<\/code>:<\/strong> Animasyonun oynatma y\u00f6n\u00fcn\u00fc tersine \u00e7evirir.<br \/>\n*   <strong><code>seek(progress)<\/code>:<\/strong> Animasyonu belirli bir ilerleme noktas\u0131na (0-1 aras\u0131) ta\u015f\u0131r. Animasyon duraklat\u0131lm\u0131\u015fsa, element o noktaya atlar. Oynat\u0131l\u0131yorsa, element o noktadan devam eder.<br \/>\n*   <strong><code>stop()<\/code>:<\/strong> Animasyonu durdurur ve ba\u015flang\u0131\u00e7 pozisyonuna s\u0131f\u0131rlar.<br \/>\n*   <strong><code>destroy()<\/code>:<\/strong> PathSlider \u00f6rne\u011fini temizler, t\u00fcm olay dinleyicilerini kald\u0131r\u0131r ve elemente uygulanan transformlar\u0131 s\u0131f\u0131rlar. Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in tek sayfa uygulamalar\u0131nda veya animasyon bitti\u011finde \u00e7a\u011fr\u0131lmas\u0131 \u00f6nemlidir.<\/p>\n<h3>Kullan\u0131c\u0131 Etkile\u015fimleriyle Kontrol<\/h3>\n<p>Butonlar, fare hareketleri veya di\u011fer kullan\u0131c\u0131 etkile\u015fimleriyle animasyonlar\u0131 kontrol edebilirsiniz.<\/p>\n<pre><code class=\"language-html\"><button id=\"playBtn\">Oynat<\/button>\n<button id=\"pauseBtn\">Duraklat<\/button>\n<button id=\"reverseBtn\">Ters \u00c7evir<\/button>\n<button id=\"seekBtn\">Y\u00fczde 50'ye Git<\/button>\n\n<script>\n    const path = document.getElementById('myAnimationPath');\n    const element = document.getElementById('animatedCircle');\n\n    const myPathSlider = new PathSlider(path, element, {\n        duration: 5000,\n        loop: true,\n        rotation: true\n    });\n\n    document.getElementById('playBtn').addEventListener('click', () => myPathSlider.play());\n    document.getElementById('pauseBtn').addEventListener('click', () => myPathSlider.pause());\n    document.getElementById('reverseBtn').addEventListener('click', () => myPathSlider.reverse());\n    document.getElementById('seekBtn').addEventListener('click', () => myPathSlider.seek(0.5)); \/\/ Animasyonu %50'ye getir\n<\/script><\/code><\/pre>\n<p>Bu etkile\u015fimli kontrol, kullan\u0131c\u0131lar\u0131n animasyonu kendi h\u0131zlar\u0131nda ke\u015ffetmelerine veya belirli noktalara atlamalar\u0131na olanak tan\u0131r, bu da \u00f6zellikle e\u011fitim materyallerinde veya interaktif haritalarda faydal\u0131d\u0131r.<\/p>\n<h2>Ger\u00e7ek D\u00fcnya Senaryolar\u0131 ve Kullan\u0131m Alanlar\u0131<\/h2>\n<p>PathSlider'\u0131n sa\u011flad\u0131\u011f\u0131 kolayl\u0131k ve esneklik, onu \u00e7e\u015fitli ger\u00e7ek d\u00fcnya uygulamalar\u0131 i\u00e7in ideal hale getirir:<\/p>\n<h3>1. Y\u00f6nlendirmeli Turlar ve Harita Animasyonlar\u0131<\/h3>\n<p>Bir harita \u00fczerinde bir rota boyunca bir arac\u0131n, bir ki\u015finin veya bir i\u015faret\u00e7inin hareketini canland\u0131rmak i\u00e7in PathSlider m\u00fckemmeldir. Kullan\u0131c\u0131lar\u0131n bir g\u00fczergah\u0131 ad\u0131m ad\u0131m takip etmesini sa\u011flayan interaktif turlar olu\u015fturulabilir.<\/p>\n<h3>2. \u00dcr\u00fcn Tan\u0131t\u0131mlar\u0131 ve \u00d6zellik Vurgulamalar\u0131<\/h3>\n<p>Bir \u00fcr\u00fcn\u00fcn farkl\u0131 par\u00e7alar\u0131n\u0131 veya \u00f6zelliklerini vurgulamak i\u00e7in, elementleri \u00fcr\u00fcn\u00fcn ana hatlar\u0131 boyunca hareket ettiren animasyonlar kullan\u0131labilir. \u00d6rne\u011fin, bir cihaz\u0131n i\u00e7 bile\u015fenlerini g\u00f6steren bir diyagramda, belirli bir bile\u015fenin yol boyunca hareket ederek \u00f6zelliklerini a\u00e7\u0131klayan bir metne ula\u015fmas\u0131.<\/p>\n<h3>3. E\u011fitsel ve Bilgilendirici \u0130\u00e7erikler<\/h3>\n<p>Karma\u015f\u0131k bir s\u00fcrecin veya kavram\u0131n g\u00f6rselle\u015ftirilmesi i\u00e7in, PathSlider ile ad\u0131mlar\u0131 yol boyunca canland\u0131rmak, \u00f6\u011frenmeyi daha ilgi \u00e7ekici hale getirebilir. \u00d6rne\u011fin, bir kimyasal reaksiyonun ad\u0131mlar\u0131 veya bir veri ak\u0131\u015f\u0131n\u0131n yolculu\u011fu.<\/p>\n<h3>4. Sanatsal ve Yarat\u0131c\u0131 Web Tasar\u0131mlar\u0131<\/h3>\n<p>Web sitelerine estetik ve dinamik bir dokunu\u015f katmak i\u00e7in, soyut \u015fekillerin veya ikonlar\u0131n belirli yollar boyunca ak\u0131c\u0131 bir \u015fekilde hareket etmesi sa\u011flanabilir. Bu, sayfa ge\u00e7i\u015flerinde veya arka plan animasyonlar\u0131nda kullan\u0131labilir.<\/p>\n<h3>5. Veri G\u00f6rselle\u015ftirme<\/h3>\n<p>Veri noktalar\u0131n\u0131n veya trendlerin bir yol boyunca canland\u0131r\u0131lmas\u0131, karma\u015f\u0131k veri setlerinin anla\u015f\u0131lmas\u0131n\u0131 kolayla\u015ft\u0131rabilir. \u00d6rne\u011fin, zaman i\u00e7indeki bir de\u011fi\u015fimi g\u00f6steren bir grafik \u00fczerinde bir noktan\u0131n ilerlemesi.<\/p>\n<h2>Performans \u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar<\/h2>\n<p>Her animasyon k\u00fct\u00fcphanesinde oldu\u011fu gibi, PathSlider kullan\u0131rken de performans optimizasyonunu g\u00f6z \u00f6n\u00fcnde bulundurmak \u00f6nemlidir.<\/p>\n<h3>1. SVG Optimizasyonu<\/h3>\n<p>*   <strong>Basit Yollar Kullan\u0131n:<\/strong> M\u00fcmk\u00fcn oldu\u011funca karma\u015f\u0131k olmayan ve az say\u0131da nokta i\u00e7eren yollar kullan\u0131n. \u00c7ok fazla B\u00e9zier kontrol noktas\u0131 veya segment, taray\u0131c\u0131n\u0131n hesaplama y\u00fck\u00fcn\u00fc art\u0131rabilir.<br \/>\n*   <strong><code>viewBox<\/code> Kullan\u0131m\u0131:<\/strong> SVG'nizi <code>viewBox<\/code> niteli\u011fi ile \u00f6l\u00e7eklenebilir hale getirin. Bu, responsive tasar\u0131mlarda SVG'nin daha verimli i\u015flenmesine yard\u0131mc\u0131 olur.<br \/>\n*   <strong>Gereksiz \u00d6\u011feleri Kald\u0131r\u0131n:<\/strong> SVG dosyan\u0131zdaki gereksiz gruplar\u0131, bo\u015f yollar\u0131 veya g\u00f6r\u00fcnmez elementleri temizleyin.<\/p>\n<h3>2. Element Se\u00e7imi ve DOM Manip\u00fclasyonu<\/h3>\n<p>*   <strong>En Az DOM Eri\u015fimi:<\/strong> Animasyon d\u00f6ng\u00fcs\u00fc i\u00e7inde gereksiz DOM sorgular\u0131ndan ka\u00e7\u0131n\u0131n. Element referanslar\u0131n\u0131 bir kez al\u0131n ve \u00f6nbelle\u011fe al\u0131n.<br \/>\n*   <strong>Donan\u0131m H\u0131zland\u0131rma:<\/strong> PathSlider, elementlerin konumunu <code>transform: translate()<\/code> ve <code>transform: rotate()<\/code> kullanarak ayarlar. Bu, modern taray\u0131c\u0131larda donan\u0131m h\u0131zland\u0131rmadan yararlan\u0131r ve genellikle <code>top<\/code>\/<code>left<\/code> gibi CSS \u00f6zelliklerini de\u011fi\u015ftirmekten daha performansl\u0131d\u0131r. Ancak, canland\u0131r\u0131lan elementin <code>will-change: transform<\/code> \u00f6zelli\u011fini CSS'e eklemek, taray\u0131c\u0131ya bu elementin de\u011fi\u015fece\u011fini \u00f6nceden bildirerek performans\u0131 daha da art\u0131rabilir.<\/p>\n<pre><code class=\"language-css\">#animatedCircle {\n    will-change: transform;\n}<\/code><\/pre>\n<h3>3. Element Say\u0131s\u0131n\u0131 Dengeleme<\/h3>\n<p>\u00c7ok say\u0131da elementi ayn\u0131 anda canland\u0131rmak performans\u0131 d\u00fc\u015f\u00fcrebilir. E\u011fer y\u00fczlerce elementi canland\u0131rman\u0131z gerekiyorsa, WebGL tabanl\u0131 \u00e7\u00f6z\u00fcmleri (\u00fc\u00e7.js gibi) veya daha d\u00fc\u015f\u00fck seviyeli Canvas API'lerini de\u011ferlendirmeniz gerekebilir. PathSlider, genellikle birka\u00e7 d\u00fczineye kadar element i\u00e7in iyi performans g\u00f6sterir.<\/p>\n<h3>4. Taray\u0131c\u0131 Uyumlulu\u011fu<\/h3>\n<p>PathSlider modern taray\u0131c\u0131larla iyi \u00e7al\u0131\u015f\u0131r. Ancak, eski taray\u0131c\u0131lar i\u00e7in (\u00f6zellikle IE) baz\u0131 SVG \u00f6zelliklerinin veya JavaScript API'lerinin deste\u011fi s\u0131n\u0131rl\u0131 olabilir. Projenizin hedef kitlesine g\u00f6re taray\u0131c\u0131 uyumlulu\u011funu test edin.<\/p>\n<h3>5. <code>destroy()<\/code> Metodunu Kullanma<\/h3>\n<p>Tek sayfa uygulamalar\u0131nda (SPA) veya bir animasyonun \u00f6mr\u00fc bitti\u011finde, PathSlider \u00f6rne\u011fini <code>destroy()<\/code> metodu ile temizlemek, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek ve gereksiz kaynak kullan\u0131m\u0131n\u0131 durdurmak i\u00e7in \u00f6nemlidir.<\/p>\n<h2>Geli\u015fmi\u015f Konular (K\u0131saca)<\/h2>\n<p>PathSlider'\u0131n temel kullan\u0131m\u0131n\u0131n \u00f6tesinde, daha geli\u015fmi\u015f senaryolar i\u00e7in baz\u0131 yakla\u015f\u0131mlar mevcuttur:<\/p>\n<h3>1. \u00d6zel Easing Fonksiyonlar\u0131<\/h3>\n<p>PathSlider, varsay\u0131lan easing fonksiyonlar\u0131na ek olarak, kendi \u00f6zel easing fonksiyonlar\u0131n\u0131z\u0131 da kullanman\u0131za olanak tan\u0131r. Bir easing fonksiyonu, 0 ile 1 aras\u0131nda bir <code>t<\/code> (zaman ilerlemesi) de\u011feri al\u0131r ve 0 ile 1 aras\u0131nda bir <code>y<\/code> (animasyon ilerlemesi) de\u011feri d\u00f6nd\u00fcr\u00fcr.<\/p>\n<pre><code class=\"language-javascript\">function customEasing(t) {\n    return t < 0.5 ? 2 <em> t <\/em> t : -1 + (4 - 2 <em> t) <\/em> t; \/\/ easeInOutQuad \u00f6rne\u011fi\n}\n\nnew PathSlider(path, element, {\n    duration: 3000,\n    easing: customEasing\n}).play();<\/code><\/pre>\n<h3>2. Di\u011fer Animasyon K\u00fct\u00fcphaneleriyle Entegrasyon<\/h3>\n<p>PathSlider, elementin yol \u00fczerindeki konumunu ve d\u00f6n\u00fc\u015f\u00fcn\u00fc ayarlarken, di\u011fer animasyon k\u00fct\u00fcphaneleri (GSAP, Anime.js) elementin di\u011fer \u00f6zelliklerini (\u00f6rne\u011fin, rengini, geni\u015fli\u011fini) canland\u0131rmak i\u00e7in kullan\u0131labilir. <code>onUpdate<\/code> geri \u00e7a\u011f\u0131r\u0131m\u0131, bu entegrasyon i\u00e7in bir k\u00f6pr\u00fc g\u00f6revi g\u00f6rebilir.<\/p>\n<pre><code class=\"language-javascript\">const myPathSlider = new PathSlider(path, element, {\n    duration: 3000,\n    onUpdate: (progress) => {\n        \/\/ PathSlider elementin konumunu ve d\u00f6n\u00fc\u015f\u00fcn\u00fc g\u00fcnceller\n        \/\/ Di\u011fer k\u00fct\u00fcphanelerle renk de\u011fi\u015fimi gibi ek animasyonlar yap\u0131labilir\n        \/\/ element.style.backgroundColor = <code>hsl(${progress * 360}, 70%, 50%)<\/code>;\n    }\n}).play();<\/code><\/pre>\n<h3>3. Responsive Tasar\u0131mda PathSlider Kullan\u0131m\u0131<\/h3>\n<p>SVG'ler do\u011falar\u0131 gere\u011fi responsive'dir. <code>viewBox<\/code> niteli\u011fini kullanarak SVG'nizin boyutunu dinamik olarak ayarlayabilirsiniz. PathSlider, elementlerin konumunu SVG'nin koordinat sistemine g\u00f6re hesaplad\u0131\u011f\u0131 i\u00e7in, SVG'nizin boyutu de\u011fi\u015fti\u011finde animasyon da otomatik olarak \u00f6l\u00e7eklenir. Ancak, e\u011fer yolu dinamik olarak yeniden boyutland\u0131rman\u0131z veya de\u011fi\u015ftirmeniz gerekiyorsa, <code>myPathSlider.destroy()<\/code> ve ard\u0131ndan yeni yol ile yeni bir <code>PathSlider<\/code> \u00f6rne\u011fi olu\u015fturman\u0131z gerekebilir.<\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>SVG yollar\u0131 boyunca elementleri canland\u0131rmak, web sitelerine dinamizm ve etkile\u015fim katman\u0131n g\u00fc\u00e7l\u00fc bir yoludur. Geleneksel y\u00f6ntemler (CSS, SMIL, saf JavaScript) belirli zorluklar ve s\u0131n\u0131rlamalar sunarken, PathSlider k\u00fct\u00fcphanesi bu s\u00fcreci \u00f6nemli \u00f6l\u00e7\u00fcde basitle\u015ftirir. Hafif yap\u0131s\u0131, esnek API'si ve kapsaml\u0131 se\u00e7enekleri ile PathSlider, geli\u015ftiricilere karma\u015f\u0131k yol tabanl\u0131 animasyonlar\u0131 kolayca olu\u015fturma ve kontrol etme yetene\u011fi sunar.<\/p>\n<p>Bu makalede, PathSlider'\u0131n temel kurulumundan detayl\u0131 se\u00e7eneklerine, birden fazla elementi canland\u0131rmaktan etkile\u015fimli kontrol mekanizmalar\u0131na ve ger\u00e7ek d\u00fcnya kullan\u0131m senaryolar\u0131na kadar geni\u015f bir yelpazeyi ele ald\u0131k. Performans ipu\u00e7lar\u0131 ve en iyi uygulamalarla birlikte, PathSlider'\u0131 projelerinizde verimli ve etkili bir \u015fekilde kullanman\u0131z i\u00e7in gerekli bilgileri sa\u011flamay\u0131 ama\u00e7lad\u0131k. PathSlider, ister basit bir nesne hareketi ister karma\u015f\u0131k bir veri g\u00f6rselle\u015ftirmesi olsun, web projelerinize profesyonel ve g\u00f6z al\u0131c\u0131 animasyonlar eklemeniz i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"SVG Yollar\u0131 Boyunca Elementleri PathSlider K\u00fct\u00fcphanesi ile Canland\u0131rma Rehberi\nGiri\u015f\nWeb teknolojilerinin geli\u015fmesiyle birlikte, kullan\u0131c\u0131 de","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-35847","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>SVG Yollar\u0131 Boyunca Elementleri PathSlider K\u00fct\u00fcphanesi ile Canland\u0131rma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SVG Yollar\u0131 Boyunca Elementleri PathSlider K\u00fct\u00fcphanesi ile Canland\u0131rma Rehberi\" \/>\n<meta property=\"og:description\" content=\"SVG Yollar\u0131 Boyunca Elementleri PathSlider K\u00fct\u00fcphanesi ile Canland\u0131rma Rehberi Giri\u015f Web teknolojilerinin geli\u015fmesiyle birlikte, kullan\u0131c\u0131 de\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-04T13:40:52+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"SVG Yollar\u0131 Boyunca Elementleri PathSlider K\u00fct\u00fcphanesi ile Canland\u0131rma Rehberi\",\"datePublished\":\"2025-12-04T13:40:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/\"},\"wordCount\":3289,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/\",\"name\":\"SVG Yollar\u0131 Boyunca Elementleri PathSlider K\u00fct\u00fcphanesi ile Canland\u0131rma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-12-04T13:40:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SVG Yollar\u0131 Boyunca Elementleri PathSlider K\u00fct\u00fcphanesi ile Canland\u0131rma Rehberi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"SVG Yollar\u0131 Boyunca Elementleri PathSlider K\u00fct\u00fcphanesi ile Canland\u0131rma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"SVG Yollar\u0131 Boyunca Elementleri PathSlider K\u00fct\u00fcphanesi ile Canland\u0131rma Rehberi","og_description":"SVG Yollar\u0131 Boyunca Elementleri PathSlider K\u00fct\u00fcphanesi ile Canland\u0131rma Rehberi Giri\u015f Web teknolojilerinin geli\u015fmesiyle birlikte, kullan\u0131c\u0131 de","og_url":"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-12-04T13:40:52+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"19 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"SVG Yollar\u0131 Boyunca Elementleri PathSlider K\u00fct\u00fcphanesi ile Canland\u0131rma Rehberi","datePublished":"2025-12-04T13:40:52+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/"},"wordCount":3289,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/","name":"SVG Yollar\u0131 Boyunca Elementleri PathSlider K\u00fct\u00fcphanesi ile Canland\u0131rma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-12-04T13:40:52+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/svg-yollari-boyunca-elementleri-pathslider-kutuphanesi-ile-canlandirma-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"SVG Yollar\u0131 Boyunca Elementleri PathSlider K\u00fct\u00fcphanesi ile Canland\u0131rma Rehberi"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35847","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=35847"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35847\/revisions"}],"predecessor-version":[{"id":35848,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/35847\/revisions\/35848"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=35847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=35847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=35847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}