{"id":12581,"date":"2025-02-16T00:00:11","date_gmt":"2025-02-15T21:00:11","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/framer-motion-ile-svg-pathi-kaydirma\/"},"modified":"2025-02-16T00:00:11","modified_gmt":"2025-02-15T21:00:11","slug":"framer-motion-ile-svg-pathi-kaydirma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/framer-motion-ile-svg-pathi-kaydirma\/","title":{"rendered":"Framer Motion ile SVG Path’i Kayd\u0131rma"},"content":{"rendered":"

Framer Motion ile SVG Path’i Kayd\u0131rma<\/p>\n

Bu makalede, Framer Motion k\u00fct\u00fcphanesini kullanarak SVG path’leri boyunca animasyonlu kayd\u0131rma i\u015flemlerini nas\u0131l ger\u00e7ekle\u015ftirece\u011finizi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. \u00d6ncelikle, SVG path’lerinin ne oldu\u011funu ve neden bunlar\u0131 animasyonlu hale getirmenin \u00f6nemli oldu\u011funu a\u00e7\u0131klayaca\u011f\u0131z. Ard\u0131ndan, Framer Motion’\u0131n sundu\u011fu olanaklar\u0131 ve bu animasyonlar\u0131 olu\u015fturmak i\u00e7in gereken ad\u0131mlar\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Son olarak, birka\u00e7 pratik \u00f6rnek ve ipu\u00e7lar\u0131 payla\u015faca\u011f\u0131z. Bu y\u00f6ntem, web sitenize etkileyici ve ak\u0131c\u0131 animasyonlar eklemenizi sa\u011flayacakt\u0131r. Daha dinamik ve ilgi \u00e7ekici bir kullan\u0131c\u0131 deneyimi sunmak isteyen geli\u015ftiriciler i\u00e7in m\u00fckemmel bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n

SVG Path’leri ve Animasyon<\/h2>\n

Scalable Vector Graphics (SVG) vekt\u00f6r grafikleri, \u00f6l\u00e7eklenebilir ve y\u00fcksek kaliteli grafikler olu\u015fturmak i\u00e7in kullan\u0131lan bir XML tabanl\u0131 dildir. SVG path’leri, d\u00fcz \u00e7izgiler, e\u011friler ve di\u011fer \u015fekillerden olu\u015fan karma\u015f\u0131k \u015fekiller olu\u015fturman\u0131za olanak tan\u0131r. Bu path’leri animasyonlu hale getirerek, \u00f6rne\u011fin, bir objenin bir yol boyunca hareket etmesini, bir animasyonlu men\u00fc olu\u015fturman\u0131z\u0131 veya interaktif grafikler olu\u015fturman\u0131za olanak sa\u011flar. Bu teknik, \u00f6zellikle modern web tasar\u0131mlar\u0131nda olduk\u00e7a pop\u00fclerdir ve kullan\u0131c\u0131 deneyimini zenginle\u015ftirir.<\/p>\n

Framer Motion ile Animasyonlu Kayd\u0131rma<\/h2>\n

Framer Motion, React uygulamalar\u0131nda animasyonlar olu\u015fturmak i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc ve kullan\u0131m\u0131 kolay bir k\u00fct\u00fcphanedir. Bu k\u00fct\u00fcphane, SVG path’leri boyunca animasyonlu kayd\u0131rma i\u015flemlerini kolayl\u0131kla ger\u00e7ekle\u015ftirmenizi sa\u011flar. \u00d6ncelikle, projenize Framer Motion’\u0131 eklemeniz gerekir. Daha sonra, SVG path’inizi tan\u0131mlayacak ve Framer Motion’\u0131n animate fonksiyonu ile path boyunca animasyonlu kayd\u0131rmay\u0131 ger\u00e7ekle\u015ftireceksiniz.<\/p>\n

\nimport { motion } from 'framer-motion';\n\nconst path = 'M10 10 H 90 V 90 H 10 Z';\n\nconst AnimatedSvg = () => {\n  return (\n    <svg width=\"100\" height=\"100\">\n      <motion.path \n        d={path}\n        fill=\"none\" \n        stroke=\"black\" \n        strokeWidth=\"2\"\n        animate={{ pathLength: 1 }}\n        transition={{ duration: 2 }}\n      \/>\n    <\/svg>\n  );\n};\n<\/code><\/pre>\n
Yukar\u0131daki kod \u00f6rne\u011finde,  motion.path bile\u015feni ile SVG path’ini Framer Motion’a entegre ettik. pathLength \u00f6zelli\u011fi, path’in ne kadar\u0131n\u0131n \u00e7izilece\u011fini belirler.  animate \u00f6zelli\u011fi,  pathLength de\u011ferini 0’dan 1’e (path’in tamam\u0131) de\u011fi\u015ftirir ve transition \u00f6zelli\u011fi animasyonun s\u00fcresini belirler. Bu basit \u00f6rne\u011fi geli\u015ftirerek, daha karma\u015f\u0131k ve etkileyici animasyonlar olu\u015fturabilirsiniz.  \u00d6rne\u011fin, animasyonun h\u0131z\u0131n\u0131 ve y\u00f6n\u00fcn\u00fc de\u011fi\u015ftirmeyi deneyebilirsiniz.  Ayr\u0131ca,  animasyonu tetiklemek i\u00e7in kullan\u0131c\u0131 etkile\u015fimini de kullanabilirsiniz.<\/p>\n
\u0130pu\u00e7lar\u0131 ve \u00d6rnekler<\/h2>\n
Daha karma\u015f\u0131k animasyonlar olu\u015fturmak i\u00e7in, path’lerinizi daha detayl\u0131 bir \u015fekilde tan\u0131mlayabilir ve Framer Motion’\u0131n sundu\u011fu di\u011fer \u00f6zelliklerinden yararlanabilirsiniz.  \u00d6rne\u011fin,  variants \u00f6zelli\u011fi ile farkl\u0131 animasyon durumlar\u0131 tan\u0131mlayabilir ve bunlar aras\u0131nda ge\u00e7i\u015f yapabilirsiniz.  Ayr\u0131ca, path’lerinizi dinamik olarak olu\u015fturmak i\u00e7in JavaScript’i kullanabilirsiniz. Bu sayede, her bir kullan\u0131c\u0131 i\u00e7in \u00f6zelle\u015ftirilmi\u015f animasyonlar yaratabilirsiniz.  Daha fazla bilgi ve \u00f6rnek i\u00e7in Framer Motion’\u0131n resmi d\u00f6k\u00fcmantasyonuna g\u00f6z atabilirsiniz.<\/p>\n
Bu makalede, Framer Motion kullanarak SVG path’lerini animasyonlu olarak kayd\u0131rmay\u0131 \u00f6\u011frendiniz. Umar\u0131m bu bilgiler sizin i\u00e7in faydal\u0131 olmu\u015ftur. Daha fazla web geli\u015ftirme ipucu ve makale i\u00e7in fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz.<\/p>\n
Faydal\u0131 Kaynaklar:<\/b><\/p>\n