{"id":40382,"date":"2026-02-26T13:41:32","date_gmt":"2026-02-26T10:41:32","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=40382"},"modified":"2026-02-26T13:41:32","modified_gmt":"2026-02-26T10:41:32","slug":"react-uygulamalariniza-react-lottie-ile-animasyon-ekleme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/","title":{"rendered":"React Uygulamalar\u0131n\u0131za React-Lottie ile Animasyon Ekleme"},"content":{"rendered":"<p><body><\/p>\n<h2>React Uygulamalar\u0131n\u0131za React-Lottie ile Animasyon Ekleme<\/h2>\n<p>Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimi (UX) ve kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) tasar\u0131m\u0131, uygulaman\u0131n ba\u015far\u0131s\u0131nda kritik bir rol oynar. Animasyonlar, bu deneyimi zenginle\u015ftirmenin, kullan\u0131c\u0131 etkile\u015fimini art\u0131rman\u0131n ve uygulaman\u0131za daha dinamik, \u00e7ekici bir hava katman\u0131n g\u00fc\u00e7l\u00fc bir yoludur. Ancak, performans sorunlar\u0131, dosya boyutlar\u0131 ve entegrasyon zorluklar\u0131 nedeniyle animasyonlar\u0131 uygulamalara dahil etmek genellikle karma\u015f\u0131k bir s\u00fcre\u00e7 olabilir. \u0130\u015fte tam da bu noktada Airbnb taraf\u0131ndan geli\u015ftirilen Lottie ve React uygulamalar\u0131 i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015f <code>react-lottie<\/code> k\u00fct\u00fcphanesi devreye giriyor. Bu rehberde, React uygulamalar\u0131n\u0131za <code>react-lottie<\/code> kullanarak nas\u0131l etkileyici animasyonlar ekleyece\u011finizi ad\u0131m ad\u0131m \u00f6\u011frenecek, pratik bilgiler ve en iyi uygulamalar\u0131 ke\u015ffedeceksiniz.<\/p>\n<h2>React-Lottie Nedir ve Neden Kullanmal\u0131y\u0131z?<\/h2>\n<p>Animasyonlar, bir uygulaman\u0131n sadece estetik g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fil, ayn\u0131 zamanda kullan\u0131labilirli\u011fini de art\u0131rabilir. Y\u00fckleme g\u00f6stergeleri, ba\u015far\u0131 mesajlar\u0131, bo\u015f durumlar veya mikro-etkile\u015fimler gibi bir\u00e7ok senaryoda animasyonlar, kullan\u0131c\u0131ya daha sezgisel ve keyifli bir deneyim sunar.<\/p>\n<h3>Lottie Nedir?<\/h3>\n<p>Lottie, Airbnb taraf\u0131ndan geli\u015ftirilen ve Adobe After Effects animasyonlar\u0131n\u0131 JSON format\u0131nda d\u0131\u015fa aktarmaya yarayan bir k\u00fct\u00fcphanedir. Bu JSON dosyalar\u0131, yerel mobil uygulamalarda (iOS, Android, React Native) ve web&#8217;de sorunsuz bir \u015fekilde oynat\u0131labilir. Lottie&#8217;nin en b\u00fcy\u00fck avantaj\u0131, vekt\u00f6r tabanl\u0131 olmas\u0131d\u0131r. Bu, animasyonlar\u0131n herhangi bir \u00e7\u00f6z\u00fcn\u00fcrl\u00fckte net ve keskin kalmas\u0131n\u0131 sa\u011flar, pikselle\u015fme veya bulan\u0131kl\u0131k olmadan \u00f6l\u00e7eklenebilirler. Ayr\u0131ca, GIF&#8217;ler veya video dosyalar\u0131na k\u0131yasla \u00e7ok daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131na sahiptirler, bu da daha h\u0131zl\u0131 y\u00fckleme s\u00fcreleri ve daha iyi performans anlam\u0131na gelir.<\/p>\n<h3>React-Lottie Nedir?<\/h3>\n<p><code>react-lottie<\/code>, Lottie animasyonlar\u0131n\u0131 React uygulamalar\u0131nda kolayca render etmek i\u00e7in tasarlanm\u0131\u015f bir React bile\u015fenidir. Lottie&#8217;nin g\u00fc\u00e7l\u00fc \u00f6zelliklerini React&#8217;in bile\u015fen tabanl\u0131 yap\u0131s\u0131yla birle\u015ftirerek, geli\u015ftiricilerin animasyonlar\u0131 uygulaman\u0131n herhangi bir yerine sorunsuz bir \u015fekilde entegre etmelerini sa\u011flar. Bu k\u00fct\u00fcphane, Lottie JSON dosyalar\u0131n\u0131 do\u011frudan React bile\u015fenleri i\u00e7inde kullanman\u0131za olanak tan\u0131r ve animasyonlar\u0131n oynatma durumunu (durdurma, ba\u015flatma, h\u0131zland\u0131rma vb.) React state&#8217;i \u00fczerinden kontrol etmenize imkan tan\u0131r.<\/p>\n<h3>Neden React-Lottie Kullanmal\u0131y\u0131z?<\/h3>\n<p>*   <strong>Performans:<\/strong> Vekt\u00f6r tabanl\u0131 animasyonlar sayesinde, geleneksel raster (piksel tabanl\u0131) animasyon formatlar\u0131na (GIF, PNG serileri) g\u00f6re \u00e7ok daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131 ve daha iyi performans sunar. Bu, sayfa y\u00fckleme s\u00fcrelerini k\u0131salt\u0131r ve CPU kullan\u0131m\u0131n\u0131 azalt\u0131r.<br \/>\n*   <strong>\u00d6l\u00e7eklenebilirlik:<\/strong> Animasyonlar vekt\u00f6r tabanl\u0131 oldu\u011fu i\u00e7in, herhangi bir ekran boyutunda veya piksel yo\u011funlu\u011funda (\u00f6rne\u011fin, retina ekranlar) m\u00fckemmel kalitede g\u00f6r\u00fcn\u00fcrler. Bulan\u0131kl\u0131k veya pikselle\u015fme sorunu ya\u015fanmaz.<br \/>\n*   <strong>Kontrol ve Esneklik:<\/strong> Animasyonlar\u0131n oynatma d\u00f6ng\u00fcs\u00fcn\u00fc, h\u0131z\u0131n\u0131, ba\u015flang\u0131\u00e7 ve biti\u015f noktalar\u0131n\u0131 React state&#8217;i \u00fczerinden kolayca kontrol edebilirsiniz. Bu, kullan\u0131c\u0131 etkile\u015fimlerine veya uygulama durumlar\u0131na g\u00f6re dinamik animasyonlar olu\u015fturman\u0131za olanak tan\u0131r.<br \/>\n*   <strong>Tasar\u0131mc\u0131-Geli\u015ftirici \u0130\u015f Ak\u0131\u015f\u0131:<\/strong> Tasar\u0131mc\u0131lar After Effects&#8217;te animasyonlar olu\u015fturur ve Bodymovin eklentisi ile JSON olarak d\u0131\u015fa aktar\u0131r. Geli\u015ftiriciler bu JSON dosyas\u0131n\u0131 do\u011frudan kullanabilir, b\u00f6ylece tasar\u0131m\u0131n tam olarak korunmas\u0131 sa\u011flan\u0131r.<br \/>\n*   <strong>\u00c7apraz Platform Deste\u011fi:<\/strong> Lottie dosyalar\u0131 web&#8217;in yan\u0131 s\u0131ra iOS, Android ve React Native&#8217;de de kullan\u0131labilir, bu da tutarl\u0131 bir marka deneyimi sunar.<\/p>\n<h2>React Uygulaman\u0131za React-Lottie Entegre Etmek<\/h2>\n<p>\u015eimdi s\u0131ra geldi <code>react-lottie<\/code>&#8216;yi React projenize entegre etmeye ve ilk animasyonunuzu g\u00f6stermeye.<\/p>\n<h3>Kurulum<\/h3>\n<p>\u00d6ncelikle projenize <code>react-lottie<\/code> k\u00fct\u00fcphanesini eklemeniz gerekir. Terminalinizi a\u00e7\u0131n ve React projenizin ana dizininde a\u015fa\u011f\u0131daki komutlardan birini \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n<pre><code class=\"language-bash\">npm install react-lottie\n<h2>veya<\/h2>\nyarn add react-lottie<\/code><\/pre>\n<h3>Lottie Animasyon Dosyas\u0131 Nereden Bulunur?<\/h3>\n<p>Lottie animasyonlar\u0131na ba\u015flamak i\u00e7in bir JSON dosyas\u0131na ihtiyac\u0131n\u0131z var.<br \/>\n*   <strong>LottieFiles.com:<\/strong> Bu site, binlerce \u00fccretsiz ve \u00fccretli Lottie animasyonu sunan harika bir kaynakt\u0131r. Projenize uygun animasyonlar\u0131 arayabilir, \u00f6nizleyebilir ve JSON dosyas\u0131n\u0131 indirebilirsiniz.<br \/>\n*   <strong>Kendi Animasyonunuzu Olu\u015fturma:<\/strong> E\u011fer \u00f6zel bir animasyona ihtiyac\u0131n\u0131z varsa, bir tasar\u0131mc\u0131 Adobe After Effects kullanarak animasyon olu\u015fturabilir ve Bodymovin eklentisi arac\u0131l\u0131\u011f\u0131yla bunu bir Lottie JSON dosyas\u0131na d\u00f6n\u00fc\u015ft\u00fcrebilir.<\/p>\n<p>\u0130ndirdi\u011finiz veya olu\u015fturdu\u011funuz JSON dosyas\u0131n\u0131 genellikle <code>src\/assets\/animations<\/code> gibi bir klas\u00f6re yerle\u015ftirebilirsiniz.<\/p>\n<h3>Temel Kullan\u0131m<\/h3>\n<p>Basit bir Lottie animasyonu g\u00f6stermek i\u00e7in \u015fu ad\u0131mlar\u0131 izleyin:<\/p>\n<p>1.  <code>react-lottie<\/code> ve JSON dosyas\u0131n\u0131 projenize import edin.<br \/>\n2.  <code>Lottie<\/code> bile\u015fenini kullan\u0131n ve gerekli <code>options<\/code> prop&#8217;unu ayarlay\u0131n.<\/p>\n<p>A\u015fa\u011f\u0131daki \u00f6rnekte, <code>loading-animation.json<\/code> adl\u0131 bir Lottie dosyas\u0131n\u0131 nas\u0131l g\u00f6sterece\u011finizi g\u00f6rebilirsiniz:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\nimport Lottie from 'react-lottie';\nimport loadingAnimation from '.\/assets\/animations\/loading-animation.json'; \/\/ Kendi JSON dosyan\u0131z\u0131n yolu\n\nfunction LoadingSpinner() {\n  const defaultOptions = {\n    loop: true, \/\/ Animasyon s\u00fcrekli d\u00f6ns\u00fcn m\u00fc?\n    autoplay: true, \/\/ Bile\u015fen y\u00fcklendi\u011finde otomatik ba\u015flas\u0131n m\u0131?\n    animationData: loadingAnimation, \/\/ JSON animasyon verisi\n    rendererSettings: {\n      preserveAspectRatio: 'xMidYMid slice' \/\/ Animasyonun oran\u0131n\u0131 koruma ayar\u0131\n    }\n  };\n\n  return (\n    <div style={{ width: 200, height: 200 }}>\n      <Lottie \n        options={defaultOptions}\n        height={200}\n        width={200}\n      \/>\n      <p>Y\u00fckleniyor...<\/p>\n    <\/div>\n  );\n}\n\nexport default LoadingSpinner;<\/code><\/pre>\n<p>Bu \u00f6rnekte:<br \/>\n*   <code>defaultOptions<\/code> objesi, <code>Lottie<\/code> bile\u015fenine animasyonun nas\u0131l davranaca\u011f\u0131n\u0131 s\u00f6yler.<br \/>\n*   <code>loop: true<\/code> animasyonun s\u00fcrekli tekrar etmesini sa\u011flar.<br \/>\n*   <code>autoplay: true<\/code> animasyonun bile\u015fen y\u00fcklendi\u011finde hemen ba\u015flamas\u0131n\u0131 sa\u011flar.<br \/>\n*   <code>animationData<\/code> prop&#8217;una import etti\u011finiz JSON dosyas\u0131n\u0131 atars\u0131n\u0131z.<br \/>\n*   <code>height<\/code> ve <code>width<\/code> prop&#8217;lar\u0131, animasyonun render edilece\u011fi alan\u0131 belirler.<\/p>\n<h3>Geli\u015fmi\u015f \u00d6zellikler ve Kontrol<\/h3>\n<p><code>react-lottie<\/code> sadece animasyonlar\u0131 g\u00f6stermekle kalmaz, ayn\u0131 zamanda \u00fczerlerinde tam kontrol sa\u011flar.<\/p>\n<h4>Oynatma Kontrol\u00fc<\/h4>\n<p>Animasyonun oynatma durumunu (duraklatma, durdurma, h\u0131z de\u011fi\u015ftirme) React state&#8217;i ile kontrol edebilirsiniz.<\/p>\n<pre><code class=\"language-jsx\">import React, { useState } from 'react';\nimport Lottie from 'react-lottie';\nimport successAnimation from '.\/assets\/animations\/success-animation.json';\n\nfunction InteractiveAnimation() {\n  const [isPaused, setIsPaused] = useState(false);\n  const [isStopped, setIsStopped] = useState(false);\n  const [speed, setSpeed] = useState(1);\n\n  const defaultOptions = {\n    loop: true,\n    autoplay: false, \/\/ Otomatik ba\u015flamas\u0131n, biz kontrol edelim\n    animationData: successAnimation,\n    rendererSettings: {\n      preserveAspectRatio: 'xMidYMid slice'\n    }\n  };\n\n  return (\n    <div>\n      <Lottie \n        options={defaultOptions}\n        height={300}\n        width={300}\n        isStopped={isStopped}\n        isPaused={isPaused}\n        speed={speed}\n      \/>\n      <button onClick={() => setIsStopped(false) || setIsPaused(false)}>Oynat<\/button>\n      <button onClick={() => setIsPaused(!isPaused)}>Duraklat\/Devam Et<\/button>\n      <button onClick={() => setIsStopped(true)}>Durdur<\/button>\n      <button onClick={() => setSpeed(speed + 0.5)}>H\u0131zland\u0131r<\/button>\n      <button onClick={() => setSpeed(speed - 0.5)}>Yava\u015flat<\/button>\n    <\/div>\n  );\n}\n\nexport default InteractiveAnimation;<\/code><\/pre>\n<p>Bu \u00f6rnekte, butonlara t\u0131klayarak animasyonun oynatma durumunu ve h\u0131z\u0131n\u0131 de\u011fi\u015ftirebilirsiniz. <code>isStopped<\/code>, <code>isPaused<\/code> ve <code>speed<\/code> prop&#8217;lar\u0131 animasyonun davran\u0131\u015f\u0131n\u0131 dinamik olarak kontrol etmenizi sa\u011flar.<\/p>\n<h4>Etkile\u015fimli Animasyonlar<\/h4>\n<p><code>react-lottie<\/code>, belirli segmentleri oynatma veya animasyon olaylar\u0131na tepki verme gibi geli\u015fmi\u015f etkile\u015fimler i\u00e7in <code>segments<\/code> ve <code>eventListeners<\/code> prop&#8217;lar\u0131n\u0131 sunar.<\/p>\n<pre><code class=\"language-jsx\">import React, { useState } from 'react';\nimport Lottie from 'react-lottie';\nimport buttonAnimation from '.\/assets\/animations\/button-animation.json'; \/\/ Bir buton t\u0131klama animasyonu\n\nfunction ClickableAnimation() {\n  const [isStopped, setIsStopped] = useState(true); \/\/ Ba\u015flang\u0131\u00e7ta durdurulmu\u015f\n  const [isPaused, setIsPaused] = useState(false);\n  const [direction, setDirection] = useState(1); \/\/ 1 ileri, -1 geri\n\n  const defaultOptions = {\n    loop: false, \/\/ Tek seferlik oynas\u0131n\n    autoplay: false,\n    animationData: buttonAnimation,\n    rendererSettings: {\n      preserveAspectRatio: 'xMidYMid slice'\n    }\n  };\n\n  const handleButtonClick = () => {\n    setIsStopped(false); \/\/ Durdurulmu\u015f durumu kald\u0131r\n    setIsPaused(false);  \/\/ Duraklat\u0131lm\u0131\u015f durumu kald\u0131r\n    setDirection(1);     \/\/ Animasyonu ileri oynat\n  };\n\n  const eventListeners = [\n    {\n      eventName: 'complete', \/\/ Animasyon tamamland\u0131\u011f\u0131nda\n      callback: () => {\n        \/\/ Animasyon tamamland\u0131\u011f\u0131nda bir \u015feyler yapabiliriz\n        \/\/ \u00d6rne\u011fin, animasyonu tekrar durdurabiliriz veya tersine \u00e7evirebiliriz.\n        \/\/ setIsStopped(true); \n        console.log('Animasyon tamamland\u0131!');\n      },\n    },\n  ];\n\n  return (\n    <div style={{ cursor: 'pointer' }} onClick={handleButtonClick}>\n      <Lottie \n        options={defaultOptions}\n        height={100}\n        width={100}\n        isStopped={isStopped}\n        isPaused={isPaused}\n        direction={direction} \/\/ Animasyonun oynatma y\u00f6n\u00fc\n        eventListeners={eventListeners}\n      \/>\n      <p>T\u0131klamak i\u00e7in animasyona dokunun!<\/p>\n    <\/div>\n  );\n}\n\nexport default ClickableAnimation;<\/code><\/pre>\n<p>Bu \u00f6rnekte, kullan\u0131c\u0131 animasyona t\u0131klad\u0131\u011f\u0131nda animasyon ileri y\u00f6nde oynar. <code>eventListeners<\/code> sayesinde <code>complete<\/code> olay\u0131 yakalanarak animasyon bitti\u011finde bir konsol mesaj\u0131 g\u00f6sterilir.<\/p>\n<h2>Pratik \u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar<\/h2>\n<p><code>react-lottie<\/code> kullan\u0131rken uygulaman\u0131z\u0131n performans\u0131n\u0131 ve eri\u015filebilirli\u011fini art\u0131rmak i\u00e7in baz\u0131 \u00f6nemli noktalar\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak faydal\u0131 olacakt\u0131r.<\/p>\n<h3>Performans Optimizasyonu<\/h3>\n<p>*   <strong>Lazy Loading (Tembel Y\u00fckleme):<\/strong> \u00d6zellikle sayfan\u0131n alt k\u0131s\u0131mlar\u0131nda veya belirli bir etkile\u015fimden sonra g\u00f6r\u00fcnen animasyonlar i\u00e7in <code>React.lazy<\/code> ve <code>Suspense<\/code> kullanarak bile\u015feni tembel y\u00fckleyin. Bu, ilk y\u00fckleme s\u00fcresini azalt\u0131r.<br \/>\n*   <strong>K\u00fc\u00e7\u00fck Dosya Boyutlar\u0131:<\/strong> Lottie JSON dosyalar\u0131 genellikle k\u00fc\u00e7\u00fck olsa da, \u00e7ok karma\u015f\u0131k veya uzun animasyonlar b\u00fcy\u00fck dosya boyutlar\u0131na sahip olabilir. Animasyonlar\u0131 m\u00fcmk\u00fcn oldu\u011funca basit tutmaya \u00e7al\u0131\u015f\u0131n. LottieFiles.com&#8217;daki &#8220;Optimize&#8221; \u00f6zelli\u011fini kullanarak dosya boyutlar\u0131n\u0131 daha da d\u00fc\u015f\u00fcrebilirsiniz.<br \/>\n*   <strong>Gereksiz Yeniden Render&#8217;lar\u0131 \u00d6nleyin:<\/strong> <code>Lottie<\/code> bile\u015feninin <code>options<\/code> veya di\u011fer prop&#8217;lar\u0131 de\u011fi\u015fmedi\u011fi s\u00fcrece yeniden render edilmesini \u00f6nlemek i\u00e7in <code>React.memo<\/code> veya <code>shouldComponentUpdate<\/code> kullan\u0131n.<br \/>\n*   <strong>G\u00f6r\u00fcn\u00fcrl\u00fck Kontrol\u00fc:<\/strong> Animasyonlar viewport d\u0131\u015f\u0131nda kald\u0131\u011f\u0131nda veya bir sekme arka plana ge\u00e7ti\u011finde otomatik olarak duraklat\u0131labilir veya durdurulabilir. Bu, gereksiz CPU kullan\u0131m\u0131n\u0131 engeller.<\/p>\n<h3>Eri\u015filebilirlik (Accessibility)<\/h3>\n<p>*   <strong>Alternatif Metin (Alt Text):<\/strong> Animasyonun amac\u0131n\u0131 veya i\u00e7eri\u011fini a\u00e7\u0131klayan alternatif metinler sa\u011flay\u0131n. \u00d6zellikle animasyon bir g\u00f6rsel bilgi aktar\u0131yorsa bu \u00f6nemlidir. E\u011fer Lottie bir <code><img><\/code> etiketi olarak render ediliyorsa <code>alt<\/code> \u00f6zelli\u011fi kullan\u0131labilir, aksi takdirde ARIA etiketleri kullan\u0131labilir.<br \/>\n*   <strong>Hareket Hassasiyeti:<\/strong> Baz\u0131 kullan\u0131c\u0131lar h\u0131zl\u0131 veya s\u00fcrekli hareket eden animasyonlara kar\u015f\u0131 hassas olabilir. Kullan\u0131c\u0131lara animasyonlar\u0131 duraklatma veya devre d\u0131\u015f\u0131 b\u0131rakma se\u00e7ene\u011fi sunmak iyi bir uygulamad\u0131r. CSS&#8217;in <code>prefers-reduced-motion<\/code> medya sorgusu ile de bu kontrol edilebilir.<\/p>\n<h3>Hata Ay\u0131klama (Debugging)<\/h3>\n<p>*   <strong>JSON Dosyas\u0131 Ge\u00e7erlili\u011fi:<\/strong> Animasyonunuz \u00e7al\u0131\u015fm\u0131yorsa, ilk olarak JSON dosyas\u0131n\u0131n ge\u00e7erli oldu\u011fundan emin olun. LottieFiles web sitesindeki \u00f6nizleyiciyi kullanarak dosyan\u0131z\u0131 test edebilirsiniz.<br \/>\n*   <strong>Taray\u0131c\u0131 Konsolu:<\/strong> Taray\u0131c\u0131n\u0131z\u0131n geli\u015ftirici ara\u00e7lar\u0131ndaki konsolu kontrol edin. <code>react-lottie<\/code> veya Lottie k\u00fct\u00fcphanesinden kaynaklanan hatalar genellikle burada g\u00f6r\u00fcn\u00fcr.<br \/>\n*   <strong>Prop Kontrol\u00fc:<\/strong> <code>Lottie<\/code> bile\u015fenine ge\u00e7irdi\u011finiz <code>options<\/code> ve di\u011fer prop&#8217;lar\u0131n do\u011fru ayarland\u0131\u011f\u0131ndan emin olun. <code>autoplay: false<\/code> ayar\u0131n\u0131 unutmak gibi basit hatalar animasyonun g\u00f6r\u00fcnmemesine neden olabilir.<\/p>\n<h3>Kullan\u0131m Senaryolar\u0131<\/h3>\n<p>*   <strong>Y\u00fckleme G\u00f6stergeleri (Loading Indicators):<\/strong> Uygulaman\u0131z veri \u00e7ekerken veya bir i\u015flem yaparken kullan\u0131c\u0131ya ho\u015f ve etkile\u015fimli bir geri bildirim sunmak i\u00e7in.<br \/>\n*   <strong>Onboarding Ekranlar\u0131:<\/strong> Yeni kullan\u0131c\u0131lar\u0131 uygulaman\u0131za tan\u0131t\u0131rken veya belirli \u00f6zellikleri a\u00e7\u0131klarken g\u00f6rsel olarak \u00e7ekici animasyonlar kullanmak.<br \/>\n*   <strong>Ba\u015far\u0131\/Hata Mesajlar\u0131:<\/strong> Bir i\u015flem ba\u015far\u0131yla tamamland\u0131\u011f\u0131nda veya bir hata olu\u015ftu\u011funda kullan\u0131c\u0131ya g\u00f6rsel bir onay sa\u011flamak.<br \/>\n*   <strong>Mikro-Etkile\u015fimler:<\/strong> Buton t\u0131klamalar\u0131, fareyle \u00fczerine gelme veya form g\u00f6nderimleri gibi k\u00fc\u00e7\u00fck kullan\u0131c\u0131 etkile\u015fimlerini vurgulamak.<br \/>\n*   <strong>Bo\u015f Durumlar (Empty States):<\/strong> Bir liste bo\u015f oldu\u011funda veya hen\u00fcz i\u00e7erik eklenmedi\u011finde kullan\u0131c\u0131ya rehberlik eden veya e\u011flendiren animasyonlar.<\/p>\n<h2>Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n<h3>Sonu\u00e7<\/h3>\n<p><code>react-lottie<\/code> k\u00fct\u00fcphanesi, React uygulamalar\u0131n\u0131za y\u00fcksek kaliteli, \u00f6l\u00e7eklenebilir ve performansl\u0131 animasyonlar eklemenin son derece etkili ve kolay bir yolunu sunar. Tasar\u0131mc\u0131lar ve geli\u015ftiriciler aras\u0131ndaki i\u015f ak\u0131\u015f\u0131n\u0131 basitle\u015ftirerek, uygulaman\u0131z\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc zenginle\u015ftirmenize ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirmenize olanak tan\u0131r. Animasyonlar\u0131n g\u00fcc\u00fcn\u00fc kullanarak uygulamalar\u0131n\u0131z\u0131 daha \u00e7ekici, etkile\u015fimli ve ak\u0131lda kal\u0131c\u0131 hale getirebilirsiniz.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<p><strong>S: Lottie animasyonlar\u0131 taray\u0131c\u0131 uyumlulu\u011fu konusunda sorun yarat\u0131r m\u0131?<\/strong><br \/>\nC: Hay\u0131r, Lottie modern web taray\u0131c\u0131lar\u0131n\u0131n \u00e7o\u011fu taraf\u0131ndan desteklenir. Animasyonlar SVG veya Canvas olarak render edildi\u011fi i\u00e7in geni\u015f bir uyumlulu\u011fa sahiptir. Eski taray\u0131c\u0131lar i\u00e7in (IE11 gibi) baz\u0131 s\u0131n\u0131rlamalar olabilir, ancak genel olarak sorunsuz \u00e7al\u0131\u015f\u0131r.<\/p>\n<p><strong>S: Lottie dosyalar\u0131 ne kadar b\u00fcy\u00fck olabilir?<\/strong><br \/>\nC: Lottie dosyalar\u0131 vekt\u00f6r tabanl\u0131 oldu\u011fu i\u00e7in genellikle GIF veya video dosyalar\u0131ndan \u00e7ok daha k\u00fc\u00e7\u00fckt\u00fcr. Ortalama bir Lottie animasyonu birka\u00e7 KB ile birka\u00e7 y\u00fcz KB aras\u0131nda de\u011fi\u015fir. Ancak, animasyonun karma\u015f\u0131kl\u0131\u011f\u0131na, katman say\u0131s\u0131na ve kare say\u0131s\u0131na ba\u011fl\u0131 olarak dosya boyutu artabilir. Performans i\u00e7in m\u00fcmk\u00fcn oldu\u011funca optimize edilmi\u015f animasyonlar kullanmak en iyisidir.<\/p>\n<p><strong>S: Kendi Lottie animasyonumu nas\u0131l olu\u015fturabilirim?<\/strong><br \/>\nC: Kendi Lottie animasyonlar\u0131n\u0131z\u0131 olu\u015fturmak i\u00e7in Adobe After Effects program\u0131na ve Bodymovin eklentisine ihtiyac\u0131n\u0131z vard\u0131r. Tasar\u0131mc\u0131lar After Effects&#8217;te animasyonlar\u0131n\u0131 olu\u015fturduktan sonra Bodymovin eklentisi arac\u0131l\u0131\u011f\u0131yla bunu bir JSON dosyas\u0131 olarak d\u0131\u015fa aktarabilirler.<\/p>\n<p><strong>S: React-Lottie mobil uygulamalarda da kullan\u0131labilir mi?<\/strong><br \/>\nC: <code>react-lottie<\/code> \u00f6zellikle web tabanl\u0131 React uygulamalar\u0131 i\u00e7in tasarlanm\u0131\u015ft\u0131r. React Native ile mobil uygulamalar geli\u015ftiriyorsan\u0131z, <code>lottie-react-native<\/code> k\u00fct\u00fcphanesini kullanman\u0131z gerekir. Her iki k\u00fct\u00fcphane de Lottie JSON dosyalar\u0131n\u0131 kullan\u0131r ve benzer bir kullan\u0131m mant\u0131\u011f\u0131na sahiptir.<\/p>\n<p><strong>S: Animasyon performans\u0131 nas\u0131l optimize edilir?<\/strong><br \/>\nC: Performans\u0131 optimize etmek i\u00e7in \u015fu y\u00f6ntemleri kullanabilirsiniz: animasyonlar\u0131 tembel y\u00fcklemek (<code>React.lazy<\/code>), m\u00fcmk\u00fcn oldu\u011funca k\u00fc\u00e7\u00fck JSON dosyalar\u0131 kullanmak, animasyonlar\u0131 viewport d\u0131\u015f\u0131nda kald\u0131klar\u0131nda veya g\u00f6r\u00fcn\u00fcr olmad\u0131klar\u0131nda duraklatmak\/durdurmak ve gereksiz yeniden renderlar\u0131 \u00f6nlemek i\u00e7in <code>React.memo<\/code> gibi optimizasyonlar\u0131 kullanmak.<\/p>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"React Uygulamalar\u0131n\u0131za React-Lottie ile Animasyon Ekleme Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimi (UX) ve kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) tasar\u0131m\u0131, uygulaman\u0131n ba\u015far\u0131s\u0131nda kritik bir rol oynar.","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":[128],"tags":[],"class_list":{"0":"post-40382","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","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>React Uygulamalar\u0131n\u0131za React-Lottie ile Animasyon Ekleme - 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\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Uygulamalar\u0131n\u0131za React-Lottie ile Animasyon Ekleme\" \/>\n<meta property=\"og:description\" content=\"React Uygulamalar\u0131n\u0131za React-Lottie ile Animasyon Ekleme Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimi (UX) ve kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) tasar\u0131m\u0131, uygulaman\u0131n ba\u015far\u0131s\u0131nda kritik bir rol oynar.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-26T10:41:32+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=\"11 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React Uygulamalar\u0131n\u0131za React-Lottie ile Animasyon Ekleme\",\"datePublished\":\"2026-02-26T10:41:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/\"},\"wordCount\":1832,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/\",\"name\":\"React Uygulamalar\u0131n\u0131za React-Lottie ile Animasyon Ekleme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-02-26T10:41:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Uygulamalar\u0131n\u0131za React-Lottie ile Animasyon Ekleme\"}]},{\"@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":"React Uygulamalar\u0131n\u0131za React-Lottie ile Animasyon Ekleme - 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\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/","og_locale":"tr_TR","og_type":"article","og_title":"React Uygulamalar\u0131n\u0131za React-Lottie ile Animasyon Ekleme","og_description":"React Uygulamalar\u0131n\u0131za React-Lottie ile Animasyon Ekleme Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimi (UX) ve kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) tasar\u0131m\u0131, uygulaman\u0131n ba\u015far\u0131s\u0131nda kritik bir rol oynar.","og_url":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-02-26T10:41:32+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"11 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React Uygulamalar\u0131n\u0131za React-Lottie ile Animasyon Ekleme","datePublished":"2026-02-26T10:41:32+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/"},"wordCount":1832,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/","url":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/","name":"React Uygulamalar\u0131n\u0131za React-Lottie ile Animasyon Ekleme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-02-26T10:41:32+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamalariniza-react-lottie-ile-animasyon-ekleme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Uygulamalar\u0131n\u0131za React-Lottie ile Animasyon Ekleme"}]},{"@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\/40382","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=40382"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/40382\/revisions"}],"predecessor-version":[{"id":40383,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/40382\/revisions\/40383"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=40382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=40382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=40382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}