Mobil uygulama geli\u015ftirme d\u00fcnyas\u0131nda kullan\u0131c\u0131 deneyimi, uygulaman\u0131z\u0131n ba\u015far\u0131s\u0131n\u0131n anahtar\u0131d\u0131r. Kullan\u0131c\u0131lar\u0131n uygulaman\u0131zla etkile\u015fimini art\u0131rman\u0131n en etkili yollar\u0131ndan biri de modern paralaks ve kayd\u0131rma efektleri kullanarak dinamik ve ilgi \u00e7ekici aray\u00fczler olu\u015fturmakt\u0131r. SwiftUI ile bu t\u00fcr g\u00f6rsel \u015f\u00f6lenleri hayata ge\u00e7irmek, d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcn\u00fczden \u00e7ok daha kolay ve keyifli bir s\u00fcre\u00e7tir.<\/p>\n
G\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda, kullan\u0131c\u0131lar\u0131n dikkatini \u00e7ekmek ve onlar\u0131 uygulaman\u0131zda tutmak giderek zorla\u015f\u0131yor. Statik ve tekd\u00fcze aray\u00fczler, kullan\u0131c\u0131lar\u0131n h\u0131zla s\u0131k\u0131lmas\u0131na ve ba\u015fka alternatiflere y\u00f6nelmesine neden olabilir. \u0130\u015fte tam bu noktada, modern paralaks ve kayd\u0131rma efektleri devreye giriyor. Bu efektler, bir uygulaman\u0131n sadece g\u00f6rsel olarak de\u011fil, ayn\u0131 zamanda etkile\u015fimli bir deneyim sunarak kullan\u0131c\u0131lar\u0131 adeta i\u00e7ine \u00e7eker. Derinlik alg\u0131s\u0131 yaratarak \u00f6\u011felerin birbirine g\u00f6re farkl\u0131 h\u0131zlarda hareket etmesini sa\u011flamak, s\u0131radan bir kayd\u0131rma i\u015flemini b\u00fcy\u00fcleyici bir g\u00f6rsel yolculu\u011fa d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.<\/p>\n
Peki, paralaks efektlerini bu kadar \u00f6nemli k\u0131lan nedir? \u0130lk olarak, bu efektler uygulaman\u0131za bir ‘canl\u0131l\u0131k’ katar. Arka plan\u0131n yava\u015f, \u00f6n plan\u0131n ise daha h\u0131zl\u0131 kaymas\u0131, kullan\u0131c\u0131n\u0131n g\u00f6z\u00fcnde bir derinlik ve \u00fc\u00e7 boyutluluk hissi uyand\u0131r\u0131r. Bu, sadece estetik bir detay olman\u0131n \u00f6tesinde, uygulaman\u0131z\u0131n daha profesyonel ve \u00f6zenle tasarlanm\u0131\u015f g\u00f6r\u00fcnmesini sa\u011flar. \u0130kincisi, kullan\u0131c\u0131 etkile\u015fimini art\u0131r\u0131r. G\u00f6rsel olarak zengin bir aray\u00fcz, kullan\u0131c\u0131lar\u0131n uygulaman\u0131zda daha fazla zaman ge\u00e7irmesine ve farkl\u0131 b\u00f6l\u00fcmleri ke\u015ffetmeye te\u015fvik eder. Bir e-ticaret uygulamas\u0131nda \u00fcr\u00fcn g\u00f6rselleri kayd\u0131r\u0131l\u0131rken metnin hafif\u00e7e geride kalmas\u0131 veya bir hikaye uygulamas\u0131nda b\u00f6l\u00fcmler aras\u0131 ge\u00e7i\u015flerde olu\u015fan yumu\u015fak animasyonlar, kullan\u0131c\u0131y\u0131 hikayenin i\u00e7ine daha fazla \u00e7eker. \u00dc\u00e7\u00fcnc\u00fcs\u00fc, markan\u0131z\u0131n veya projenizin kimli\u011fini g\u00fc\u00e7lendirir. Benzersiz ve ak\u0131lda kal\u0131c\u0131 efektler kullanarak, uygulaman\u0131z\u0131n di\u011ferlerinden ayr\u0131\u015fmas\u0131n\u0131 sa\u011flayabilir, b\u00f6ylece kullan\u0131c\u0131lar\u0131n zihninde kal\u0131c\u0131 bir iz b\u0131rakabilirsiniz.<\/p>\n
SwiftUI, bu t\u00fcr efektleri olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc ve sezgisel bir \u00e7er\u00e7eve sunar. Deklaratif yap\u0131s\u0131 sayesinde, karma\u015f\u0131k animasyonlar\u0131 ve hareketleri \u00e7ok daha az kodla ve anla\u015f\u0131l\u0131r bir \u015fekilde tan\u0131mlayabilirsiniz. Geleneksel UI yakla\u015f\u0131mlar\u0131na g\u00f6re \u00e7ok daha h\u0131zl\u0131 prototipleme ve geli\u015ftirme imkan\u0131 sunar. \u00d6zellikle Bu makalede, SwiftUI kullanarak modern paralaks ve kayd\u0131rma efektlerini ad\u0131m ad\u0131m nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ke\u015ffedece\u011fiz. Temel konseptlerden ba\u015flayarak, ileri d\u00fczey tekniklere ve ger\u00e7ek d\u00fcnya senaryolar\u0131na uzanan bir yolculu\u011fa \u00e7\u0131kaca\u011f\u0131z. Haz\u0131rsan\u0131z, gelin SwiftUI’\u0131n b\u00fcy\u00fcl\u00fc d\u00fcnyas\u0131nda, kullan\u0131c\u0131lar\u0131n\u0131za unutulmaz deneyimler sunacak efektleri birlikte in\u015fa etmeye ba\u015flayal\u0131m.<\/p>\n SwiftUI ile paralaks ve geli\u015fmi\u015f kayd\u0131rma efektleri olu\u015fturmaya ba\u015flamadan \u00f6nce, bu dinamik etkile\u015fimlerin temelini olu\u015fturan ana bile\u015fenleri ve kavramlar\u0131 anlamak hayati \u00f6nem ta\u015f\u0131r. Bu yap\u0131 ta\u015flar\u0131, bize g\u00f6r\u00fcn\u00fcmlerin konumunu, boyutunu ve di\u011fer \u00f6zelliklerini kayd\u0131rma olaylar\u0131na g\u00f6re nas\u0131l manip\u00fcle edece\u011fimiz konusunda gerekli ara\u00e7lar\u0131 sa\u011flar. Konuya yeni ba\u015flayanlar i\u00e7in bu temel kavramlar\u0131 sa\u011flam bir \u015fekilde oturtmak, daha karma\u015f\u0131k efektleri in\u015fa ederken kar\u015f\u0131la\u015f\u0131lacak zorluklar\u0131 en aza indirecektir.<\/p>\n 1. ScrollView:<\/strong> Ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, <\/code><\/p>\n 2. GeometryReader:<\/strong> Paralaks efektlerinin kalbi ve ruhu <\/code><\/p>\n 3. offset(x:y:):<\/strong> Bu de\u011fi\u015ftirici (modifier), bir g\u00f6r\u00fcn\u00fcm\u00fcn kendi orijinal konumundan belirli bir miktar kadar kayd\u0131r\u0131lmas\u0131n\u0131 sa\u011flar. Paralaks efektlerinde, bir arka plan g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fcn veya metnin kayd\u0131rma mesafesine ba\u011fl\u0131 olarak daha yava\u015f hareket etmesini sa\u011flamak i\u00e7in 4. scaleEffect():<\/strong> Bir g\u00f6r\u00fcn\u00fcm\u00fcn boyutunu de\u011fi\u015ftirmek i\u00e7in kullan\u0131l\u0131r. Baz\u0131 kayd\u0131rma efektlerinde, \u00f6\u011feler merkeze yakla\u015ft\u0131k\u00e7a b\u00fcy\u00fcrken, uzakla\u015ft\u0131k\u00e7a k\u00fc\u00e7\u00fclebilir. Bu, kullan\u0131c\u0131 aray\u00fcz\u00fcne dinamik bir derinlik ve odak noktas\u0131 katman\u0131n etkili bir yoludur.<\/p>\n 5. opacity():<\/strong> Bir g\u00f6r\u00fcn\u00fcm\u00fcn \u015feffafl\u0131\u011f\u0131n\u0131 kontrol eder. \u00d6\u011feler kayd\u0131r\u0131ld\u0131k\u00e7a yava\u015f\u00e7a g\u00f6r\u00fcn\u00fcr hale gelmesi (fade-in) veya kaybolmas\u0131 (fade-out) gibi efektler olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. \u00d6zellikle bir sayfan\u0131n alt k\u0131sm\u0131na veya \u00fcst k\u0131sm\u0131na yakla\u015f\u0131ld\u0131\u011f\u0131nda i\u00e7eriklerin yumu\u015fak bir \u015fekilde belirmesi veya yok olmas\u0131 estetik bir dokunu\u015f katar.<\/p>\n 6. rotationEffect():<\/strong> Bir g\u00f6r\u00fcn\u00fcm\u00fcn belirli bir a\u00e7\u0131 etraf\u0131nda d\u00f6nmesini sa\u011flar. Daha deneysel veya stilize kayd\u0131rma efektleri i\u00e7in kullan\u0131labilir; \u00f6rne\u011fin, bir kart kayd\u0131r\u0131l\u0131rken hafif\u00e7e d\u00f6nmesi gibi.<\/p>\n Bu temel de\u011fi\u015ftiricilerin yan\u0131 s\u0131ra, SwiftUI'\u0131n durumu ( Art\u0131k temel yap\u0131 ta\u015flar\u0131n\u0131 anlad\u0131\u011f\u0131m\u0131za g\u00f6re, ilk basit paralaks efektimizi SwiftUI'da nas\u0131l olu\u015fturaca\u011f\u0131m\u0131za odaklanabiliriz. Bu b\u00f6l\u00fcmde, bir arka plan g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fcn, \u00f6n plandaki i\u00e7eriklerden daha yava\u015f kayd\u0131\u011f\u0131 klasik bir paralaks efekti \u00f6rne\u011fini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Bu teknik, genellikle b\u00fcy\u00fck ba\u015fl\u0131k g\u00f6rselleri veya sayfa \u00fcst\u00fc kahraman (hero) b\u00f6l\u00fcmleri i\u00e7in kullan\u0131l\u0131r ve sayfan\u0131za an\u0131nda derinlik ve g\u00f6rsel \u00e7ekicilik katar.<\/p>\n Amac\u0131m\u0131z, bir Yeni bir SwiftUI projesi ba\u015flat\u0131n veya mevcut bir projede yeni bir View dosyas\u0131 olu\u015fturun.<\/p>\n \u00d6ncelikle, kayd\u0131r\u0131labilir bir alan olu\u015fturmak i\u00e7in bir <\/code><\/p>\n Paralaks efektinin anahtar\u0131, kayd\u0131rma pozisyonunu dinamik olarak okuyabilmektir. Bunu <\/code><\/p>\n Bu basit ad\u0131mlarla, SwiftUI'da etkileyici bir paralaks kayd\u0131rma efekti olu\u015fturdunuz. Kullan\u0131c\u0131lar\u0131n\u0131z uygulaman\u0131zdaki bu derinlik alg\u0131s\u0131ndan ve ak\u0131c\u0131 animasyondan etkileneceklerdir. Unutmay\u0131n, \"background_image\" yerine kendi g\u00f6rselinizi eklemeyi ve projenizin Assets klas\u00f6r\u00fcne s\u00fcr\u00fcklemeyi unutmay\u0131n. Bu temel mekanizmay\u0131 anlad\u0131ktan sonra, daha karma\u015f\u0131k ve \u00e7ok katmanl\u0131 paralaks efektlerine ge\u00e7meye haz\u0131rs\u0131n\u0131z demektir.<\/p>\n Basit bir paralaks efekti olu\u015fturman\u0131n temellerini att\u0131\u011f\u0131m\u0131za g\u00f6re, \u015fimdi SwiftUI'\u0131n g\u00fcc\u00fcn\u00fc kullanarak daha karma\u015f\u0131k ve dinamik kayd\u0131rma efektlerine ge\u00e7ebiliriz. Bu b\u00f6l\u00fcmde, bir listedeki \u00f6\u011felerin kayd\u0131rma pozisyonlar\u0131na g\u00f6re boyutlar\u0131n\u0131 (\u00f6l\u00e7ekleme) ve \u015feffafl\u0131klar\u0131n\u0131 (opakl\u0131k) nas\u0131l de\u011fi\u015ftirece\u011fimizi inceleyece\u011fiz. Bu t\u00fcr efektler, kullan\u0131c\u0131 aray\u00fcz\u00fcne modern bir dokunu\u015f katarak, birbiri ard\u0131na gelen statik \u00f6\u011feler yerine interaktif ve canl\u0131 bir deneyim sunar.<\/p>\n Bir e-ticaret uygulamas\u0131nda \u00fcr\u00fcn listesi, bir haber uygulamas\u0131nda makale listesi veya bir portf\u00f6y uygulamas\u0131nda proje kartlar\u0131 gibi senaryolarda, \u00f6\u011felerin kayd\u0131r\u0131l\u0131rken hafif\u00e7e b\u00fcy\u00fcy\u00fcp k\u00fc\u00e7\u00fclmesi veya opakl\u0131klar\u0131n\u0131n de\u011fi\u015fmesi, kullan\u0131c\u0131ya g\u00f6rsel bir hiyerar\u015fi ve odak noktas\u0131 sa\u011flayabilir. Amac\u0131m\u0131z, Bir <\/code><\/p>\n Her bir <\/code><\/p>\n Bu ileri d\u00fczey tekniklerle, uygulaman\u0131zdaki liste g\u00f6r\u00fcn\u00fcmlerini \u00e7ok daha etkile\u015fimli ve ak\u0131lda kal\u0131c\u0131 hale getirebilirsiniz. Dinamik \u00f6l\u00e7ekleme ve opakl\u0131k ge\u00e7i\u015fleri, kullan\u0131c\u0131n\u0131n g\u00f6z\u00fcn\u00fc belirli \u00f6\u011felere \u00e7ekerek veya onlara ne kadar uzakta olduklar\u0131n\u0131 hissettirerek g\u00f6rsel bir hikaye anlatman\u0131za yard\u0131mc\u0131 olur. Bu prensipleri farkl\u0131 de\u011fi\u015ftiricilerle (\u00f6rne\u011fin Tek katmanl\u0131 paralaks ve dinamik \u00f6l\u00e7ekleme\/opakl\u0131k efektlerini ba\u015far\u0131yla uygulad\u0131ktan sonra, \u015fimdi SwiftUI'da \u00e7ok daha zengin ve karma\u015f\u0131k animasyonlar olu\u015fturman\u0131n kap\u0131lar\u0131n\u0131 aralayabiliriz. \u00c7ok katmanl\u0131 paralaks, farkl\u0131 \u00f6\u011felerin (arka plan, orta plan, \u00f6n plan) farkl\u0131 h\u0131zlarda hareket etmesiyle daha derin ve ger\u00e7ek\u00e7i bir 3D hissi yarat\u0131rken, karma\u015f\u0131k animasyonlar genellikle birden fazla de\u011fi\u015ftiricinin bir arada ve hassas zamanlamayla kullan\u0131lmas\u0131n\u0131 gerektirir.<\/p>\n \u00c7ok katmanl\u0131 paralaks, genellikle bir sahneyi veya bir ekran\u0131 birden fazla g\u00f6rsel katmana ay\u0131rarak \u00e7al\u0131\u015f\u0131r. Her katman, kayd\u0131rma mesafesine farkl\u0131 bir oranla tepki verir. Arka plan katman\u0131 en yava\u015f, orta plan biraz daha h\u0131zl\u0131 ve \u00f6n plan ise en h\u0131zl\u0131 hareket eder. Bu, ger\u00e7ek d\u00fcnyadaki nesnelerin uzakl\u0131klar\u0131na g\u00f6re farkl\u0131 h\u0131zlarda hareket etti\u011fi perspektif alg\u0131s\u0131n\u0131 taklit eder.<\/p>\n Uygulama Ad\u0131mlar\u0131:<\/strong><\/p>\n <\/code><\/p>\n Sadece paralaks de\u011fil, kayd\u0131rma olaylar\u0131na ba\u011fl\u0131 olarak daha bir\u00e7ok animasyon tetikleyebiliriz:<\/p>\n <\/code><\/p>\n Karma\u015f\u0131k animasyonlar ve \u00e7ok katmanl\u0131 paralaks efektleri olu\u015ftururken dikkat edilmesi gereken en \u00f6nemli nokta performanst\u0131r. A\u015f\u0131r\u0131 say\u0131da Teorik bilgileri ve kod \u00f6rneklerini g\u00f6rd\u00fckten sonra, bu bilgileri ger\u00e7ek d\u00fcnya uygulamalar\u0131nda nas\u0131l kullanabilece\u011fimizi vaka analizleri \u00fczerinden inceleyelim. SwiftUI'\u0131n sundu\u011fu paralaks ve kayd\u0131rma efektleri, bir\u00e7ok farkl\u0131 uygulama t\u00fcr\u00fcnde kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde geli\u015ftirebilir. \u0130\u015fte iki farkl\u0131 senaryo ve bu senaryolarda kullanabilece\u011fimiz teknikler:<\/p>\n Standart bir e-ticaret \u00fcr\u00fcn detay sayfas\u0131 genellikle bir \u00fcr\u00fcn g\u00f6rseli, fiyat, a\u00e7\u0131klama ve sat\u0131n alma butonu gibi \u00f6\u011feler i\u00e7erir. Ancak bu \u00f6\u011feler genellikle statik olup, kullan\u0131c\u0131n\u0131n ilgisini yeterince \u00e7ekmeyebilir. Kullan\u0131c\u0131lar sayfay\u0131 kayd\u0131r\u0131rken monoton bir deneyim ya\u015fayabilirler.<\/p>\n \u00dcr\u00fcn detay sayfas\u0131nda, ana \u00fcr\u00fcn g\u00f6rselini sayfan\u0131n en \u00fcst\u00fcnde b\u00fcy\u00fck bir paralaks arka plan olarak konumland\u0131rabiliriz. Kullan\u0131c\u0131 a\u015fa\u011f\u0131 kayd\u0131rd\u0131k\u00e7a, \u00fcr\u00fcn g\u00f6rseli daha yava\u015f hareket ederken, \u00fcr\u00fcn ad\u0131, fiyat\u0131 ve a\u00e7\u0131klamas\u0131 gibi metin i\u00e7erikleri g\u00f6rselin \u00fczerine do\u011fru \u00e7\u0131kar. Bu, kullan\u0131c\u0131ya \u00fcr\u00fcn\u00fcn \u00f6ne \u00e7\u0131kt\u0131\u011f\u0131 ve detaylar\u0131n g\u00f6rselin i\u00e7inde belirdi\u011fi dinamik bir ge\u00e7i\u015f sa\u011flar.<\/p>\n <\/code><\/p>\n Bir uygulaman\u0131n veya hizmetin \u00f6zelliklerini tan\u0131tan uzun bir a\u00e7\u0131l\u0131\u015f sayfas\u0131 (landing page) genellikle \u00e7ok say\u0131da metin ve g\u00f6rsel i\u00e7erir. Bu i\u00e7erikleri s\u0131ral\u0131 bir \u015fekilde sunmak s\u0131k\u0131c\u0131 olabilir ve kullan\u0131c\u0131n\u0131n sayfay\u0131 terk etmesine neden olabilir.<\/p>\n Her bir \u00f6zellik b\u00f6l\u00fcm\u00fcn\u00fc, kayd\u0131r\u0131ld\u0131k\u00e7a farkl\u0131 animasyonlar ve paralaks efektleriyle ortaya \u00e7\u0131karabiliriz. \u00d6rne\u011fin, her b\u00f6l\u00fcm\u00fcn kendi arka plan g\u00f6rseli farkl\u0131 bir h\u0131zda kayarken, metin ve ikonlar belirgin bir efektle (fade-in, scale-up, slide-in) g\u00f6r\u00fcn\u00fcr hale gelebilir. Bu, sayfay\u0131 adeta bir hikaye gibi ak\u0131c\u0131 ve ilgi \u00e7ekici bir \u015fekilde sunar.<\/p>\n <\/code><\/p>\n Bu vaka analizleri, SwiftUI'da paralaks ve kayd\u0131rma efektlerinin sadece g\u00f6rsel bir g\u00fczellikten ibaret olmad\u0131\u011f\u0131n\u0131, ayn\u0131 zamanda kullan\u0131c\u0131lar\u0131n uygulaman\u0131zla olan etkile\u015fimini ve alg\u0131lad\u0131\u011f\u0131 de\u011feri art\u0131rd\u0131\u011f\u0131n\u0131 g\u00f6stermektedir. \u00d6nemli olan, bu efektleri uygulaman\u0131z\u0131n genel tasar\u0131m felsefesiyle uyumlu bir \u015fekilde ve performans\u0131 g\u00f6z ard\u0131 etmeden kullanmakt\u0131r. A\u015f\u0131r\u0131ya ka\u00e7madan ve anlaml\u0131 bir kullan\u0131c\u0131 deneyimi sunacak \u015fekilde uyguland\u0131\u011f\u0131nda, bu teknikler uygulaman\u0131z\u0131 bir sonraki seviyeye ta\u015f\u0131yabilir.<\/p>\n SwiftUI, modern mobil uygulama aray\u00fczleri olu\u015fturmak i\u00e7in geli\u015ftiricilere inan\u0131lmaz bir g\u00fc\u00e7 ve esneklik sunar. Bu makale boyunca ele ald\u0131\u011f\u0131m\u0131z paralaks ve geli\u015fmi\u015f kayd\u0131rma efektleri, bu g\u00fcc\u00fcn sadece k\u00fc\u00e7\u00fck bir par\u00e7as\u0131d\u0131r. G\u00f6rd\u00fc\u011f\u00fcm\u00fcz gibi, Basit bir arka plan paralaks\u0131ndan, kart listelerinde dinamik \u00f6l\u00e7ekleme ve opakl\u0131k ge\u00e7i\u015flerine, hatta \u00e7ok katmanl\u0131 derinlik efektlerine kadar, SwiftUI'\u0131n deklaratif yap\u0131s\u0131 ve anl\u0131k \u00f6nizleme yetenekleri, yarat\u0131c\u0131 fikirlerinizi h\u0131zl\u0131 ve verimli bir \u015fekilde hayata ge\u00e7irmenizi sa\u011flar. Ger\u00e7ek d\u00fcnya senaryolar\u0131nda, bir e-ticaret \u00fcr\u00fcn detay sayfas\u0131ndan kurumsal tan\u0131t\u0131m sayfalar\u0131na kadar bir\u00e7ok alanda bu efektlerin ne kadar de\u011ferli olabilece\u011fini de g\u00f6rm\u00fc\u015f olduk. Kullan\u0131c\u0131lar art\u0131k sadece i\u015flevsellik de\u011fil, ayn\u0131 zamanda estetik ve ak\u0131c\u0131 bir deneyim beklemektedir. Bu beklentiyi kar\u015f\u0131lamak, hatta a\u015fmak, uygulaman\u0131z\u0131n ba\u015far\u0131s\u0131 i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n SwiftUI ile animasyon ve kayd\u0131rma efektleri d\u00fcnyas\u0131na ad\u0131m att\u0131\u011f\u0131n\u0131zda, neredeyse s\u0131n\u0131rs\u0131z olas\u0131l\u0131kla kar\u015f\u0131la\u015f\u0131rs\u0131n\u0131z. \u00d6nemli olan, yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 kullanmaktan \u00e7ekinmemek, farkl\u0131 de\u011fi\u015ftiricileri birle\u015ftirmek ve s\u00fcrekli olarak denemeler yapmakt\u0131r. Performans\u0131 g\u00f6z \u00f6n\u00fcnde bulundurarak, gereksiz hesaplamalardan ka\u00e7\u0131narak ve eri\u015filebilirlik standartlar\u0131na uyarak kullan\u0131c\u0131lar\u0131n\u0131z i\u00e7in en iyi deneyimi sunmaya odaklan\u0131n. Unutmay\u0131n, iyi tasarlanm\u0131\u015f bir efekt, binlerce kelimeden daha fazlas\u0131n\u0131 anlatabilir ve uygulaman\u0131z\u0131n kalitesini do\u011frudan yans\u0131t\u0131r. SwiftUI'\u0131n sundu\u011fu bu ara\u00e7larla kendi benzersiz ve etkileyici kullan\u0131c\u0131 deneyimlerinizi olu\u015fturmaya ba\u015flaman\u0131n tam zaman\u0131!<\/p>\n Paralaks efektleri, s\u00fcrekli olarak g\u00f6r\u00fcn\u00fcmlerin konumunu hesaplad\u0131\u011f\u0131 ve animasyonlar uygulad\u0131\u011f\u0131 i\u00e7in potansiyel olarak performans\u0131 etkileyebilir. \u00d6zellikle \u00e7ok say\u0131da Kesinlikle hay\u0131r! G\u00f6rsel olarak en yayg\u0131n kullan\u0131m alan\u0131 g\u00f6rseller olsa da, paralaks efektleri metinler, ikonlar, kartlar ve hatta t\u00fcm g\u00f6r\u00fcn\u00fcm konteynerleri \u00fczerinde de kullan\u0131labilir. \u00d6rne\u011fin, bir metin blo\u011funu arka plandan daha h\u0131zl\u0131 kayd\u0131rarak veya bir kart\u0131n kayd\u0131rma konumuna g\u00f6re boyutunu ve opakl\u0131\u011f\u0131n\u0131 de\u011fi\u015ftirerek dinamik etkile\u015fimler olu\u015fturabilirsiniz. Esasen, SwiftUI'da GeometryReader<\/code> gibi ara\u00e7lar, kayd\u0131rma pozisyonunu alg\u0131layarak dinamik g\u00f6r\u00fcn\u00fcmler olu\u015fturmam\u0131za olanak tan\u0131r. Bu sayede, resimlerin, metinlerin veya di\u011fer UI \u00f6\u011felerinin kayd\u0131rma h\u0131z\u0131n\u0131, opakl\u0131\u011f\u0131n\u0131 veya boyutunu ger\u00e7ek zamanl\u0131 olarak ayarlayabiliriz. Mobil uygulama kullan\u0131c\u0131lar\u0131 art\u0131k sadece i\u015flevsellik de\u011fil, ayn\u0131 zamanda estetik ve ak\u0131c\u0131 bir deneyim beklemektedir. Paralaks ve geli\u015fmi\u015f kayd\u0131rma efektleri, bu beklentiyi kar\u015f\u0131laman\u0131n ve hatta a\u015fman\u0131n anahtarlar\u0131ndan biridir.<\/p>\nSwiftUI’da Temel Kayd\u0131rma ve G\u00f6r\u00fcn\u00fcm Yap\u0131 Ta\u015flar\u0131 Nelerdir?<\/h2>\n
ScrollView<\/code> SwiftUI’da kayd\u0131r\u0131labilir i\u00e7erik olu\u015fturman\u0131n temel yoludur. \u0130\u00e7ine yerle\u015ftirdi\u011finiz herhangi bir g\u00f6r\u00fcn\u00fcm, i\u00e7erik boyutlar\u0131 ScrollView<\/code>‘in g\u00f6r\u00fcnt\u00fcleme alan\u0131ndan daha b\u00fcy\u00fck oldu\u011funda kayd\u0131r\u0131labilir hale gelir. Yatay (.horizontal<\/code>) veya dikey (.vertical<\/code>) kayd\u0131rma y\u00f6nlerini destekler. Paralaks efektleri genellikle dikey kayd\u0131rma ba\u011flam\u0131nda kullan\u0131l\u0131r, ancak yatay senaryolarda da uygulanabilir.<\/p>\n\n ScrollView(.vertical) {\n VStack {\n \/\/ Kayd\u0131r\u0131labilir i\u00e7erikler buraya gelecek\n ForEach(0..<20) { index in\n Text(\"\u00d6\u011fe \\(index)\")\n .font(.title)\n .padding()\n }\n }\n }\n <\/pre>\nGeometryReader<\/code>'d\u0131r. Bu \u00f6zel g\u00f6r\u00fcn\u00fcm, kapsay\u0131c\u0131s\u0131n\u0131n boyutunu ve kendi konumunu okumam\u0131za olanak tan\u0131r. \u00d6zellikle bir ScrollView<\/code> i\u00e7inde kullan\u0131ld\u0131\u011f\u0131nda, i\u00e7eriklerin kayd\u0131rma pozisyonuna g\u00f6re nas\u0131l hareket etmesi gerekti\u011fini hesaplamak i\u00e7in vazge\u00e7ilmez bir ara\u00e7t\u0131r. GeometryProxy<\/code> adl\u0131 bir parametre ile, g\u00f6r\u00fcn\u00fcmlerin geni\u015fli\u011fi, y\u00fcksekli\u011fi ve koordinat sistemindeki konumlar\u0131 gibi bilgilere eri\u015fim sa\u011flar\u0131z. \u00d6rne\u011fin, bir g\u00f6r\u00fcn\u00fcm\u00fcn ekran\u0131n \u00fcst kenar\u0131na olan uzakl\u0131\u011f\u0131n\u0131 veya kendi kapsay\u0131c\u0131s\u0131na olan uzakl\u0131\u011f\u0131n\u0131 GeometryReader<\/code> ile belirleyebiliriz.<\/p>\n\n GeometryReader { geometry in\n Text(\"Bu g\u00f6r\u00fcn\u00fcm\u00fcn boyutu: \\(geometry.size.width)x\\(geometry.size.height)\")\n .frame(width: geometry.size.width)\n .background(Color.blue)\n }\n <\/pre>\noffset<\/code> kullan\u0131l\u0131r. Genellikle GeometryReader<\/code>'dan al\u0131nan kayd\u0131rma de\u011feri ile orant\u0131l\u0131 olarak ayarlan\u0131r.<\/p>\n@State<\/code>) ve veri ak\u0131\u015f\u0131n\u0131 (@Binding<\/code>, @ObservedObject<\/code>) y\u00f6netme yetenekleri, kayd\u0131rma olaylar\u0131na tepki veren dinamik efektler olu\u015fturmak i\u00e7in elzemdir. Kayd\u0131rma pozisyonuna g\u00f6re hesaplanan de\u011ferleri bu durum de\u011fi\u015fkenlerinde saklayarak, g\u00f6r\u00fcn\u00fcmlerin an\u0131nda g\u00fcncellenmesini sa\u011flayabiliriz. Bir sonraki b\u00f6l\u00fcmde, bu yap\u0131 ta\u015flar\u0131n\u0131 bir araya getirerek ger\u00e7ek bir paralaks efekti olu\u015fturmaya ba\u015flayaca\u011f\u0131z. Bu temelleri sa\u011flam bir \u015fekilde anlad\u0131\u011f\u0131n\u0131zda, SwiftUI ile yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131n s\u0131n\u0131rlar\u0131n\u0131 zorlayacak daha karma\u015f\u0131k ve etkileyici animasyonlar\u0131 tasarlamak i\u00e7in haz\u0131rs\u0131n\u0131z demektir.<\/p>\nAd\u0131m Ad\u0131m Basit Bir Paralaks Efekti Nas\u0131l Uygulan\u0131r?<\/h3>\n
Senaryo: Arka Plan G\u00f6rseliyle Temel Paralaks<\/h4>\n
ScrollView<\/code> i\u00e7inde b\u00fcy\u00fck bir arka plan g\u00f6r\u00fcnt\u00fcs\u00fc ve \u00fczerine yerle\u015ftirilmi\u015f metin i\u00e7eri\u011fi bulundurmak. Kullan\u0131c\u0131 kayd\u0131rma yapt\u0131\u011f\u0131nda, metin normal h\u0131z\u0131nda kayarken, arka plan g\u00f6r\u00fcnt\u00fcs\u00fc daha yava\u015f hareket ederek bir derinlik ill\u00fczyonu yaratacak. Bunu ba\u015farmak i\u00e7in GeometryReader<\/code>'\u0131 kullanarak kayd\u0131rma mesafesini \u00f6l\u00e7ecek ve bu mesafeyi arka plan g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fcn offset<\/code> de\u011ferine uygulayaca\u011f\u0131z.<\/p>\nAd\u0131m 1: Temel SwiftUI Projesini Olu\u015fturma<\/h4>\n
Ad\u0131m 2: ScrollView ve \u0130\u00e7erikleri Olu\u015fturma<\/h4>\n
ScrollView<\/code>'e ihtiyac\u0131m\u0131z var. \u0130\u00e7ine bir ZStack<\/code> yerle\u015ftirece\u011fiz, \u00e7\u00fcnk\u00fc arka plan g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc ve \u00f6n plan i\u00e7eri\u011fini \u00fcst \u00fcste bindirmemiz gerekiyor.<\/p>\n\n import SwiftUI\n\n struct ParallaxView: View {\n var body: some View {\n ScrollView(.vertical, showsIndicators: false) {\n ZStack(alignment: .top) {\n \/\/ Paralaks arka plan\u0131 buraya gelecek\n \/\/ \u00d6n plan i\u00e7erikleri buraya gelecek\n }\n }\n .edgesIgnoringSafeArea(.all) \/\/ Kenarlar\u0131 yoksayarak tam ekran kullan\n }\n }\n <\/pre>\nAd\u0131m 3: GeometryReader ile Kayd\u0131rma Pozisyonunu Tespit Etme<\/h4>\n
GeometryReader<\/code> ile yapaca\u011f\u0131z. ScrollView<\/code> i\u00e7indeki ZStack<\/code>'in en \u00fcst\u00fcne yerle\u015ftirilen bir GeometryReader<\/code>, kayd\u0131rma de\u011fi\u015ftik\u00e7e kendi konumunu raporlayacakt\u0131r.<\/p>\n\n ZStack(alignment: .top) {\n GeometryReader { geometry in\n let minY = geometry.frame(in: .global).minY \/\/ Ekran\u0131n \u00fcst kenar\u0131na g\u00f6re Y pozisyonu\n\n \/\/ Arka plan g\u00f6rseli\n Image(\"background_image\") \/\/ Kendi g\u00f6rselinizi kullan\u0131n\n .resizable()\n .scaledToFill()\n .frame(width: geometry.size.width, height: max(0, minY) + 300) \/\/ Y\u00fcksekli\u011fi dinamik olarak ayarla\n .offset(y: -minY \/ 2) \/\/ Paralaks efekti i\u00e7in Y offsetini uygula\n .clipped()\n }\n .frame(height: 300) \/\/ GeometryReader'\u0131n minimum y\u00fcksekli\u011fi\n\n \/\/ \u00d6n plan i\u00e7erikleri\n VStack {\n Text(\"SwiftUI'da Paralaks Efekti\")\n .font(.largeTitle)\n .fontWeight(.bold)\n .foregroundColor(.white)\n .padding(.top, 250) \/\/ G\u00f6rselin alt\u0131na gelecek \u015fekilde ayarla\n\n ForEach(0..<20) { index in\n Text(\"Bu, \u00f6n plandaki i\u00e7erik #\\(index)\")\n .font(.title3)\n .padding()\n .frame(maxWidth: .infinity)\n .background(Color.white.opacity(0.8))\n .cornerRadius(10)\n .padding(.horizontal)\n .padding(.vertical, 5)\n }\n }\n .background(Color.white) \/\/ \u00d6n plan i\u00e7eri\u011finin arka plan\u0131\n .cornerRadius(20)\n .offset(y: 300) \/\/ GeometryReader'\u0131n y\u00fcksekli\u011fi kadar a\u015fa\u011f\u0131 kayd\u0131r\n }\n <\/pre>\nKod A\u00e7\u0131klamas\u0131:<\/h4>\n
\n
GeometryReader { geometry in ... }<\/code>: Bu blok, kayd\u0131rma g\u00f6r\u00fcn\u00fcm\u00fcndeki i\u00e7eri\u011fin konumunu ve boyutunu okur.<\/li>\nlet minY = geometry.frame(in: .global).minY<\/code>: Bu, GeometryReader<\/code>'\u0131n ekran\u0131n \u00fcst kenar\u0131na g\u00f6re mevcut Y koordinat\u0131n\u0131 verir. Kayd\u0131rma yukar\u0131 do\u011fru yap\u0131ld\u0131\u011f\u0131nda minY<\/code> de\u011feri k\u00fc\u00e7\u00fcl\u00fcr (negatifle\u015fir), a\u015fa\u011f\u0131 do\u011fru yap\u0131ld\u0131\u011f\u0131nda b\u00fcy\u00fcr (pozitifle\u015fir).<\/li>\nImage(\"background_image\")...<\/code>: Arka plan g\u00f6rselimiz. resizable().scaledToFill()<\/code> ile g\u00f6rselin boyutu ayarlan\u0131r.<\/li>\n.frame(width: geometry.size.width, height: max(0, minY) + 300)<\/code>: G\u00f6rselin y\u00fcksekli\u011fini dinamik olarak ayarl\u0131yoruz. minY<\/code> negatifle\u015fti\u011finde bile y\u00fcksekli\u011fin pozitif kalmas\u0131n\u0131 sa\u011fl\u0131yor ve 300 ba\u015flang\u0131\u00e7 y\u00fcksekli\u011fi ekliyoruz. Bu, g\u00f6rselin yukar\u0131 kayd\u0131r\u0131ld\u0131\u011f\u0131nda da g\u00f6r\u00fcn\u00fcr kalmas\u0131n\u0131 sa\u011flar.<\/li>\n.offset(y: -minY \/ 2)<\/code>: \u0130\u015fte paralaks efektinin kalbi! minY<\/code> de\u011feri de\u011fi\u015ftik\u00e7e, g\u00f6rseli bu de\u011ferin yar\u0131s\u0131 kadar z\u0131t y\u00f6nde hareket ettiriyoruz. \u00d6rne\u011fin, e\u011fer minY<\/code> -100 olursa (yukar\u0131 kayd\u0131rma), g\u00f6rsel +50 piksel a\u015fa\u011f\u0131 kayd\u0131r\u0131l\u0131r, bu da onun daha yava\u015f hareket etmesini sa\u011flar. B\u00f6lme de\u011feri (burada 2) ne kadar b\u00fcy\u00fckse, paralaks efekti o kadar az belirgin olur; ne kadar k\u00fc\u00e7\u00fckse, o kadar belirgin olur.<\/li>\n.frame(height: 300)<\/code>: GeometryReader<\/code>'\u0131n kendisi i\u00e7in bir ba\u015flang\u0131\u00e7 y\u00fcksekli\u011fi tan\u0131ml\u0131yoruz, b\u00f6ylece arka plan g\u00f6rseli i\u00e7in yer ayr\u0131l\u0131r.<\/li>\nVStack {...}.offset(y: 300)<\/code>: \u00d6n plan i\u00e7eri\u011fimiz, GeometryReader<\/code>'\u0131n alt\u0131nda ba\u015flayacak \u015fekilde ba\u015flang\u0131\u00e7ta 300 piksel a\u015fa\u011f\u0131 kayd\u0131r\u0131l\u0131r.<\/li>\n<\/ul>\n\u0130leri D\u00fczey Kayd\u0131rma Efektleri: Dinamik \u00d6l\u00e7ekleme ve Opakl\u0131k Ge\u00e7i\u015fleri<\/h2>\n
Senaryo: Kart Listesinde Dinamik Boyut ve Opakl\u0131k De\u011fi\u015fimi<\/h4>\n
ScrollView<\/code> i\u00e7indeki kartlar\u0131n ekran\u0131n ortas\u0131na yakla\u015ft\u0131k\u00e7a b\u00fcy\u00fcmesini ve tamamen opak hale gelmesini, ekran\u0131n kenarlar\u0131na yakla\u015ft\u0131k\u00e7a ise k\u00fc\u00e7\u00fcl\u00fcp \u015feffafla\u015fmas\u0131n\u0131 sa\u011flamakt\u0131r.<\/p>\nAd\u0131m 1: Temel Liste Yap\u0131s\u0131n\u0131 Olu\u015fturma<\/h4>\n
ScrollView<\/code> i\u00e7inde bir VStack<\/code> veya LazyVStack<\/code> kullanarak kart benzeri \u00f6\u011felerden olu\u015fan bir liste olu\u015ftural\u0131m. Her bir kart\u0131 temsil eden \u00f6zel bir SwiftUI g\u00f6r\u00fcn\u00fcm\u00fc tan\u0131mlamak iyi bir pratiktir.<\/p>\n\n import SwiftUI\n\n struct CardView: View {\n let title: String\n let subtitle: String\n let color: Color\n\n var body: some View {\n VStack(alignment: .leading) {\n Text(title)\n .font(.title2)\n .fontWeight(.bold)\n .foregroundColor(.white)\n Text(subtitle)\n .font(.subheadline)\n .foregroundColor(.white.opacity(0.8))\n }\n .padding()\n .frame(maxWidth: .infinity)\n .background(color)\n .cornerRadius(15)\n .shadow(radius: 5)\n .padding(.horizontal)\n }\n }\n\n struct DynamicEffectsView: View {\n let colors: [Color] = [.red, .blue, .green, .purple, .orange, .pink, .yellow, .cyan]\n\n var body: some View {\n ScrollView(.vertical, showsIndicators: false) {\n LazyVStack(spacing: 20) {\n ForEach(0..<20) { index in\n \/\/ Her bir kart buraya gelecek\n }\n }\n .padding(.vertical)\n }\n .edgesIgnoringSafeArea(.top)\n }\n }\n <\/pre>\nAd\u0131m 2: GeometryReader ile Her Kart\u0131n Konumunu Okuma<\/h4>\n
CardView<\/code>'in kayd\u0131rma g\u00f6r\u00fcn\u00fcm\u00fcndeki kendi konumunu ba\u011f\u0131ms\u0131z olarak okumas\u0131 gerekecek. Bunun i\u00e7in ForEach<\/code> d\u00f6ng\u00fcs\u00fcn\u00fcn i\u00e7indeki her bir CardView<\/code>'i bir GeometryReader<\/code> ile sarmalayaca\u011f\u0131z.<\/p>\n\n \/\/ ... (CardView ve DynamicEffectsView tan\u0131m\u0131)\n\n struct DynamicEffectsView: View {\n let colors: [Color] = [.red, .blue, .green, .purple, .orange, .pink, .yellow, .cyan]\n\n var body: some View {\n ScrollView(.vertical, showsIndicators: false) {\n LazyVStack(spacing: 20) {\n ForEach(0..<20) { index in\n GeometryReader { geometry in\n let minY = geometry.frame(in: .global).minY\n let scrollHeight = UIScreen.main.bounds.height \/\/ Ekran y\u00fcksekli\u011fi\n let centerOffset = (scrollHeight \/ 2) - (geometry.size.height \/ 2) \/\/ Kart\u0131n orta noktas\u0131 ile ekran\u0131n ortas\u0131 aras\u0131ndaki fark\n\n \/\/ min Y de\u011feri, kart\u0131n \u00fcst kenar\u0131n\u0131n ekran\u0131n \u00fcst\u00fcne olan uzakl\u0131\u011f\u0131n\u0131 verir.\n \/\/ Kart ekran\u0131n ortas\u0131na yakla\u015ft\u0131k\u00e7a, minY de\u011feri centerOffset de\u011ferine yakla\u015f\u0131r.\n\n \/\/ Kayd\u0131rma mesafesine g\u00f6re \u00f6l\u00e7eklendirme ve opakl\u0131k hesaplamalar\u0131\n let scale = min(1.0, max(0.5, 1 - abs(minY - centerOffset) \/ scrollHeight * 1.0))\n let opacity = min(1.0, max(0.4, 1 - abs(minY - centerOffset) \/ scrollHeight * 1.5))\n\n\n CardView(title: \"Ba\u015fl\u0131k \\(index + 1)\",\n subtitle: \"Bu \\(index + 1). kart\u0131n a\u00e7\u0131klamas\u0131.\",\n color: colors[index % colors.count])\n .scaleEffect(scale) \/\/ Hesaplanan \u00f6l\u00e7ekleme de\u011ferini uygula\n .opacity(opacity) \/\/ Hesaplanan opakl\u0131k de\u011ferini uygula\n .rotation3DEffect(.degrees(Double(minY - centerOffset) \/ 50), axis: (x: 0, y: 1, z: 0)) \/\/ Hafif 3D d\u00f6n\u00fc\u015f\u00fcm\n }\n .frame(height: 200) \/\/ Her kart i\u00e7in sabit bir y\u00fckseklik\n }\n }\n .padding(.vertical)\n }\n .edgesIgnoringSafeArea(.top)\n }\n }\n <\/pre>\nKod A\u00e7\u0131klamas\u0131 ve Hesaplamalar:<\/h4>\n
\n
geometry.frame(in: .global).minY<\/code>: Her bir kart\u0131n ekran\u0131n \u00fcst kenar\u0131na olan uzakl\u0131\u011f\u0131n\u0131 verir. Bu de\u011fer, kart yukar\u0131 kayd\u0131r\u0131ld\u0131k\u00e7a azal\u0131r, a\u015fa\u011f\u0131 kayd\u0131r\u0131ld\u0131k\u00e7a artar.<\/li>\nscrollHeight<\/code> ve centerOffset<\/code>: Ekran\u0131n y\u00fcksekli\u011fini alarak ve kart\u0131n ortas\u0131n\u0131 bularak, her bir kart\u0131n ekran\u0131n tam merkezine ne kadar uzak oldu\u011funu hesaplamaya \u00e7al\u0131\u015f\u0131r\u0131z.<\/li>\nscale<\/code> hesaplamas\u0131:\n\n
abs(minY - centerOffset)<\/code>: Kart\u0131n orta noktas\u0131n\u0131n ekran\u0131n merkezinden ne kadar uzak oldu\u011funu mutlak de\u011fer olarak verir. Merkezde bu de\u011fer s\u0131f\u0131ra yak\u0131nd\u0131r.<\/li>\n\/ scrollHeight * 1.0<\/code>: Bu uzakl\u0131\u011f\u0131 ekran y\u00fcksekli\u011fine oranlayarak 0 ile 1 aras\u0131nda bir de\u011fer elde ederiz. \u00c7arpan (1.0), efektin ne kadar h\u0131zl\u0131 ger\u00e7ekle\u015fece\u011fini belirler.<\/li>\n1 - ...<\/code>: Uzakl\u0131k artt\u0131k\u00e7a (yani kart merkezden uzakla\u015ft\u0131k\u00e7a) bu de\u011fer k\u00fc\u00e7\u00fclecektir.<\/li>\nmin(1.0, max(0.5, ...))<\/code>: \u00d6l\u00e7ekleme de\u011ferini 0.5 ile 1.0 aras\u0131nda s\u0131n\u0131rlar\u0131z. B\u00f6ylece kartlar tamamen kaybolmaz veya a\u015f\u0131r\u0131 k\u00fc\u00e7\u00fclmez.<\/li>\n<\/ul>\n* 1.0<\/code> veya * 1.5<\/code>) de\u011fi\u015ftirerek efektin yo\u011funlu\u011funu ve h\u0131z\u0131n\u0131 ayarlayabilirsiniz. Deneme yaparak en iyi g\u00f6rsel dengeyi bulun.<\/div>\n<\/li>\nopacity<\/code> hesaplamas\u0131: \u00d6l\u00e7eklemeye benzer \u015fekilde, kart\u0131n merkezden uzakl\u0131\u011f\u0131na g\u00f6re opakl\u0131\u011f\u0131n\u0131 ayarlar. min(1.0, max(0.4, ...))<\/code> ile opakl\u0131\u011f\u0131 0.4 ile 1.0 aras\u0131nda tutar\u0131z.<\/li>\n.scaleEffect(scale)<\/code> ve .opacity(opacity)<\/code>: Hesaplanan de\u011ferleri kart g\u00f6r\u00fcn\u00fcmlerine uygular.<\/li>\n.rotation3DEffect(...)<\/code>: Opsiyonel olarak, kartlar\u0131n kayd\u0131r\u0131l\u0131rken hafif\u00e7e 3D d\u00f6nmesini sa\u011flayarak ekstra bir dinamizm katabilirsiniz. Burada minY - centerOffset<\/code> de\u011ferini kullanarak, kart\u0131n merkezden uzakl\u0131\u011f\u0131na g\u00f6re d\u00f6n\u00fc\u015f a\u00e7\u0131s\u0131n\u0131 belirliyoruz.<\/li>\n.frame(height: 200)<\/code>: Her bir GeometryReader<\/code> i\u00e7in belirli bir y\u00fckseklik sa\u011flamak \u00f6nemlidir, aksi takdirde GeometryReader<\/code> kapsad\u0131\u011f\u0131 i\u00e7eri\u011fe g\u00f6re boyutlanaca\u011f\u0131 i\u00e7in beklenmedik davran\u0131\u015flar sergileyebilir.<\/li>\n<\/ul>\nrotationEffect<\/code> veya blur<\/code>) birle\u015ftirerek daha da benzersiz efektler yaratabilirsiniz.<\/p>\n\u00c7ok Katmanl\u0131 Paralaks ve Karma\u015f\u0131k Animasyonlar \u0130\u00e7in \u0130pu\u00e7lar\u0131<\/h3>\n
\u00c7ok Katmanl\u0131 Paralaks: Derinlik Hissi Yaratmak<\/h4>\n
\n
ZStack<\/code> kullan\u0131n. En alttaki katman\u0131 ilk, en \u00fcstteki katman\u0131 en son tan\u0131mlay\u0131n.<\/li>\nGeometryReader<\/code> i\u00e7inde), kayd\u0131rma pozisyonunu okumak i\u00e7in ayn\u0131 minY<\/code> de\u011ferini kullan\u0131n.<\/li>\noffset(y:)<\/code> de\u011fi\u015ftiricisine, -minY \/ divisor<\/code> form\u00fcl\u00fcnde farkl\u0131 bir divisor<\/code> de\u011feri uygulay\u0131n.\n\n
divisor<\/code> (\u00f6rne\u011fin, -minY \/ 4<\/code>).<\/li>\ndivisor<\/code> (\u00f6rne\u011fin, -minY \/ 2<\/code>).<\/li>\ndivisor<\/code> yok (-minY \/ 1<\/code> veya -minY * 0<\/code>).<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n struct MultiLayerParallaxView: View {\n var body: some View {\n ScrollView(.vertical, showsIndicators: false) {\n GeometryReader { scrollViewGeometry in\n let minY = scrollViewGeometry.frame(in: .global).minY\n\n ZStack {\n \/\/ Arka Plan Katman\u0131 (En Yava\u015f Hareket)\n Image(\"background_city\") \/\/ Geni\u015f bir g\u00f6rsel\n .resizable()\n .scaledToFill()\n .frame(width: scrollViewGeometry.size.width, height: 600 + max(0, minY))\n .offset(y: -minY * 0.4) \/\/ Daha az kayd\u0131r\n .clipped()\n .zIndex(0) \/\/ Katman s\u0131ralamas\u0131\n\n \/\/ Orta Plan Katman\u0131 (Orta H\u0131zda Hareket)\n Image(\"middle_trees\") \/\/ \u015eeffaf bir g\u00f6rsel\n .resizable()\n .scaledToFit()\n .frame(width: scrollViewGeometry.size.width * 1.2, height: 400 + max(0, minY\/2))\n .offset(y: -minY * 0.7) \/\/ Orta h\u0131zda kayd\u0131r\n .clipped()\n .zIndex(1)\n\n \/\/ \u00d6n Plan \u0130\u00e7erik (Daha H\u0131zl\u0131 Hareket veya Sabit)\n VStack {\n Text(\"\u015eehrin Derinlikleri\")\n .font(.largeTitle)\n .fontWeight(.heavy)\n .foregroundColor(.white)\n .padding(.top, 200)\n\n ForEach(0..<15) { i in\n Text(\"Ke\u015ffetmeye devam edin - B\u00f6l\u00fcm \\(i+1)\")\n .padding()\n .frame(maxWidth: .infinity)\n .background(Color.white.opacity(0.8))\n .cornerRadius(10)\n .padding(.horizontal)\n .padding(.vertical, 4)\n }\n }\n .offset(y: 500) \/\/ Ba\u015flang\u0131\u00e7 pozisyonunu ayarla\n .background(Color.white.opacity(0.9))\n .cornerRadius(20)\n .zIndex(2)\n }\n }\n .frame(height: 1500) \/\/ ScrollView'in kayd\u0131r\u0131labilir alan\u0131n\u0131 uzatmak i\u00e7in\n }\n .edgesIgnoringSafeArea(.all)\n }\n }\n <\/pre>\n.renderingMode(.original)<\/code> kullanmay\u0131 deneyin.<\/div>\nKarma\u015f\u0131k Animasyonlar ve Ge\u00e7i\u015fler:<\/h4>\n
\n
GeometryReader<\/code>'\u0131n do\u011frudan kullan\u0131lmas\u0131 performans sorunlar\u0131na yol a\u00e7abilir veya karma\u015f\u0131k bir view hiyerar\u015fisinde zorlay\u0131c\u0131 olabilir. PreferenceKey<\/code>, alt g\u00f6r\u00fcn\u00fcmlerden \u00fcst g\u00f6r\u00fcn\u00fcmlere konum veya boyut bilgisi aktarmak i\u00e7in g\u00fc\u00e7l\u00fc bir mekanizmad\u0131r. Bu sayede, kayd\u0131rma konumuna ba\u011fl\u0131 olarak farkl\u0131 bir \u00fcst g\u00f6r\u00fcn\u00fcmde animasyon tetikleyebilirsiniz.<\/li>\n.animation()<\/code> de\u011fi\u015ftiricisi varsay\u0131lan olarak kolayl\u0131k sa\u011flar. Ancak daha karma\u015f\u0131k animasyonlar i\u00e7in withAnimation {}<\/code> blo\u011funu kullanarak \u00f6zel gecikmeler (.delay()<\/code>), s\u00fcreler (.duration()<\/code>) ve e\u011friler (.easeIn<\/code>, .spring<\/code>) tan\u0131mlayabilirsiniz.<\/li>\nScrollView<\/code>'in kayd\u0131rma davran\u0131\u015f\u0131n\u0131 daha hassas kontrol etmenizi sa\u011flar. \u00d6zellikle sayfalama (paging) veya belirli noktalara otomatik olarak yap\u0131\u015fma (snapping) gibi efektler i\u00e7in idealdir. \u00d6rne\u011fin, \u00fcr\u00fcn g\u00f6rsellerini birer birer kayd\u0131r\u0131rken her bir g\u00f6rselin tam merkeze oturmas\u0131n\u0131 sa\u011flayabilirsiniz.<\/li>\n.scrollTransition<\/code> modifier, kayd\u0131r\u0131labilir bir i\u00e7erikte bir g\u00f6r\u00fcn\u00fcm\u00fcn ekran i\u00e7inde belirmesi veya kaybolmas\u0131 s\u0131ras\u0131nda daha kolay animasyonlar tan\u0131mlaman\u0131z\u0131 sa\u011flar. Bu, dinamik \u00f6l\u00e7ekleme, opakl\u0131k, rotasyon gibi efektleri daha az kodla ve daha optimize bir \u015fekilde uygulaman\u0131za olanak tan\u0131r. \u00d6rne\u011fin:<\/li>\n<\/ul>\n\n \/\/ iOS 17 ve sonras\u0131 i\u00e7in\n struct ScrollTransitionExample: View {\n var body: some View {\n ScrollView {\n ForEach(0..<30) { i in\n RoundedRectangle(cornerRadius: 20)\n .fill(Color.blue.opacity(0.7))\n .frame(height: 150)\n .overlay(Text(\"\u00d6\u011fe \\(i)\").font(.title).foregroundColor(.white))\n .scrollTransition { content, phase in\n content\n .opacity(phase.isIdentity ? 1 : 0.5) \/\/ Tam g\u00f6r\u00fcn\u00fcrken 1, de\u011filken 0.5 opakl\u0131k\n .scaleEffect(phase.isIdentity ? 1 : 0.8) \/\/ Tam g\u00f6r\u00fcn\u00fcrken 1, de\u011filken 0.8 \u00f6l\u00e7ek\n .offset(y: phase.isIdentity ? 0 : 50) \/\/ Tam g\u00f6r\u00fcn\u00fcrken 0, de\u011filken 50 offset\n }\n .padding(.horizontal)\n }\n }\n }\n }\n <\/pre>\nGeometryReader<\/code> kullanmak veya her karede yo\u011fun hesaplamalar yapmak uygulaman\u0131z\u0131 yava\u015flatabilir. Bu nedenle, m\u00fcmk\u00fcn oldu\u011funca hafif de\u011fi\u015ftiriciler kullanmaya ve gerekti\u011finde LazyVStack<\/code>\/LazyHStack<\/code> gibi g\u00f6r\u00fcn\u00fcmleri sadece ekranda g\u00f6r\u00fcnd\u00fcklerinde y\u00fckleyen bile\u015fenleri tercih etmeye \u00f6zen g\u00f6sterin. Ayr\u0131ca, animasyonlar\u0131n\u0131z\u0131n eri\u015filebilirlik (Accessibility) a\u00e7\u0131s\u0131ndan da sorunsuz \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olun.<\/p>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131: Uygulamal\u0131 Vaka Analizleri<\/h2>\n
Vaka Analizi 1: E-ticaret \u00dcr\u00fcn Detay Sayfas\u0131<\/h3>\n
Problem:<\/h4>\n
\u00c7\u00f6z\u00fcm: Etkile\u015fimli \u00dcr\u00fcn G\u00f6rseli ve Detay Paralaks\u0131<\/h4>\n
Uygulanacak Teknikler:<\/h4>\n
\n
GeometryReader<\/code> i\u00e7ine al\u0131n\u0131r ve minY<\/code> de\u011ferine g\u00f6re offset(y:)<\/code> de\u011fi\u015ftiricisi uygulan\u0131r. Bu, g\u00f6rselin kayd\u0131rma h\u0131z\u0131n\u0131 yava\u015flat\u0131r. G\u00f6rselin y\u00fcksekli\u011fini de dinamik olarak ayarlayarak yukar\u0131 kayd\u0131r\u0131ld\u0131\u011f\u0131nda ekranda kalmas\u0131n\u0131 sa\u011flayabiliriz.<\/li>\nZStack<\/code> i\u00e7inde \u00fcst \u00fcste bindirilir. G\u00f6rsel en altta, detay metinleri ise \u00fcstte yer al\u0131r.<\/li>\noffset(y:)<\/code> veya padding(.top)<\/code> ile ayarlan\u0131r. Kayd\u0131rma ba\u015flad\u0131\u011f\u0131nda bu metinler g\u00f6rselin \u00fczerine do\u011fru kayar.<\/li>\n\n struct ProductDetailView: View {\n var body: some View {\n ScrollView(.vertical, showsIndicators: false) {\n GeometryReader { geometry in\n let minY = geometry.frame(in: .global).minY\n let height = max(0, minY + 400) \/\/ G\u00f6rselin min y\u00fcksekli\u011fi 400\n\n Image(\"product_image\") \/\/ \u00dcr\u00fcn g\u00f6rseliniz\n .resizable()\n .scaledToFill()\n .frame(width: geometry.size.width, height: height)\n .offset(y: -minY * 0.8) \/\/ Hafif paralaks\n .clipped()\n }\n .frame(height: 400) \/\/ GeometryReader'\u0131n ba\u015flang\u0131\u00e7 y\u00fcksekli\u011fi\n\n VStack(alignment: .leading, spacing: 15) {\n Text(\"Y\u00fcksek Kaliteli Ak\u0131ll\u0131 Saat\")\n .font(.largeTitle)\n .fontWeight(.bold)\n .padding(.horizontal)\n\n Text(\"$299.99\")\n .font(.title2)\n .fontWeight(.semibold)\n .foregroundColor(.green)\n .padding(.horizontal)\n\n Divider().padding(.horizontal)\n\n Text(\"Bu ak\u0131ll\u0131 saat, modern tasar\u0131m\u0131 ve geli\u015fmi\u015f \u00f6zellikleriyle g\u00fcnl\u00fck ya\u015fam\u0131n\u0131z\u0131 kolayla\u015ft\u0131r\u0131r. Su ge\u00e7irmezlik, kalp at\u0131\u015f h\u0131z\u0131 takibi ve uzun pil \u00f6mr\u00fc gibi \u00f6zelliklere sahiptir. iOS ve Android cihazlarla uyumludur.\")\n .font(.body)\n .padding(.horizontal)\n \n \/\/ Daha fazla \u00fcr\u00fcn detay\u0131, yorumlar vb.\n ForEach(0..<5) { _ in\n Text(\"\u00d6zellik: A\u00e7\u0131klama burada yer al\u0131yor.\")\n .padding(.horizontal)\n .padding(.vertical, 2)\n }\n \n Button(\"Sepete Ekle\") {\n \/\/ Sepete ekleme eylemi\n }\n .frame(maxWidth: .infinity)\n .padding()\n .background(Color.accentColor)\n .foregroundColor(.white)\n .cornerRadius(10)\n .padding(.horizontal)\n .padding(.vertical)\n }\n .background(Color.white)\n .cornerRadius(20)\n .offset(y: -20) \/\/ \u0130\u00e7eri\u011fi biraz yukar\u0131 kayd\u0131rarak paralaksla birle\u015fmesini sa\u011fla\n }\n .edgesIgnoringSafeArea(.top)\n .background(Color.white) \/\/ ScrollView arka plan\u0131\n }\n }\n <\/pre>\nVaka Analizi 2: Kurumsal Uygulama Tan\u0131t\u0131m Sayfas\u0131<\/h3>\n
Problem:<\/h4>\n
\u00c7\u00f6z\u00fcm: Hikaye Anlatan Kayd\u0131rma Efektleri<\/h4>\n
Uygulanacak Teknikler:<\/h4>\n
\n
ScrollView<\/code> i\u00e7inde her bir \u00f6zellik b\u00f6l\u00fcm\u00fcn\u00fc ayr\u0131 bir VStack<\/code> veya Section<\/code> olarak tan\u0131mlay\u0131n.<\/li>\nGeometryReader<\/code>'\u0131 olabilir. Bu sayede her b\u00f6l\u00fcm\u00fcn ekrandaki konumunu ba\u011f\u0131ms\u0131z olarak takip edebiliriz.<\/li>\nminY<\/code> de\u011feri belirli bir e\u015fi\u011fi ge\u00e7ti\u011finde, b\u00f6l\u00fcmdeki metin veya g\u00f6rseller i\u00e7in opacity()<\/code>, scaleEffect()<\/code>, offset()<\/code> gibi de\u011fi\u015ftiriciler kullanarak animasyonlar tetikleyin. withAnimation<\/code> bloklar\u0131n\u0131 kullanarak bu ge\u00e7i\u015fleri p\u00fcr\u00fczs\u00fcz hale getirin.<\/li>\n.scrollTargetBehavior(.paging)<\/code> (iOS 17+) veya \u00f6zel PreferenceKey<\/code> uygulamalar\u0131yla yap\u0131labilir.<\/li>\n<\/ul>\n\n struct FeatureSection: View {\n let title: String\n let description: String\n let imageName: String\n let backgroundColor: Color\n\n var body: some View {\n GeometryReader { geometry in\n let minY = geometry.frame(in: .global).minY\n let height = geometry.size.height\n let progress = min(1.0, max(0, 1 - (minY \/ (height * 0.7)))) \/\/ G\u00f6r\u00fcnen alana g\u00f6re ilerleme\n\n VStack(alignment: .leading, spacing: 15) {\n Image(systemName: imageName)\n .resizable()\n .scaledToFit()\n .frame(width: 60, height: 60)\n .foregroundColor(.white)\n .padding(.bottom, 10)\n\n Text(title)\n .font(.largeTitle)\n .fontWeight(.bold)\n .foregroundColor(.white)\n\n Text(description)\n .font(.body)\n .foregroundColor(.white.opacity(0.9))\n }\n .padding(30)\n .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)\n .background(backgroundColor.opacity(0.8))\n .cornerRadius(20)\n .padding(.horizontal)\n .scaleEffect(0.8 + (progress * 0.2)) \/\/ G\u00f6r\u00fcnen alana girdik\u00e7e b\u00fcy\u00fcr\n .opacity(progress) \/\/ G\u00f6r\u00fcnen alana girdik\u00e7e opakla\u015f\u0131r\n .offset(x: (1 - progress) * 100) \/\/ Sa\u011fa do\u011fru kayarak belirir\n }\n .frame(height: 400) \/\/ Her b\u00f6l\u00fcm\u00fcn y\u00fcksekli\u011fi\n }\n }\n\n struct AppIntroView: View {\n var body: some View {\n ScrollView(.vertical, showsIndicators: false) {\n VStack(spacing: 40) {\n Text(\"Uygulamam\u0131z\u0131n \u00d6zellikleri\")\n .font(.largeTitle)\n .fontWeight(.heavy)\n .padding(.top, 80)\n\n FeatureSection(title: \"H\u0131zl\u0131 ve G\u00fcvenli\",\n description: \"Verileriniz bizimle her zaman g\u00fcvende. Geli\u015fmi\u015f \u015fifreleme teknolojileri ile koruma sa\u011fl\u0131yoruz.\",\n imageName: \"lock.fill\",\n backgroundColor: .blue)\n\n FeatureSection(title: \"Kolay Kullan\u0131m\",\n description: \"Sezgisel aray\u00fcz\u00fc sayesinde uygulamam\u0131zla hemen tan\u0131\u015f\u0131n ve kullanmaya ba\u015flay\u0131n.\",\n imageName: \"hand.tap.fill\",\n backgroundColor: .green)\n\n FeatureSection(title: \"Her Yerde Eri\u015filebilir\",\n description: \"Mobil, tablet ve web'den eri\u015fim imkan\u0131 ile nerede olursan\u0131z olun yan\u0131n\u0131zday\u0131z.\",\n imageName: \"globe\",\n backgroundColor: .purple)\n \n \/\/ Daha fazla \u00f6zellik b\u00f6l\u00fcm\u00fc eklenebilir\n Spacer()\n }\n }\n .edgesIgnoringSafeArea(.top)\n }\n }\n <\/pre>\nSonu\u00e7: SwiftUI ile Yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 Konu\u015fturun<\/h2>\n
ScrollView<\/code>, GeometryReader<\/code> ve \u00e7e\u015fitli g\u00f6r\u00fcn\u00fcm de\u011fi\u015ftiricilerini (offset<\/code>, scaleEffect<\/code>, opacity<\/code>) ustaca kullanarak, kullan\u0131c\u0131lar\u0131n\u0131za sadece bilgi sunan de\u011fil, ayn\u0131 zamanda onlar\u0131 i\u00e7ine \u00e7eken ve etkile\u015fimde bulunmaktan keyif almalar\u0131n\u0131 sa\u011flayan deneyimler yaratabilirsiniz.<\/p>\nS\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
\n
GeometryReader<\/code> kullanmak veya her karede yo\u011fun matematiksel hesaplamalar yapmak performans\u0131 d\u00fc\u015f\u00fcrebilir. Optimizasyon i\u00e7in, karma\u015f\u0131k hesaplamalar\u0131 m\u00fcmk\u00fcn oldu\u011funca basitle\u015ftirmeye, b\u00fcy\u00fck g\u00f6rselleri optimize etmeye ve LazyVStack<\/code>\/LazyHStack<\/code> gibi sadece g\u00f6r\u00fcn\u00fcr \u00f6\u011feleri y\u00fckleyen bile\u015fenleri kullanmaya \u00f6zen g\u00f6sterilmelidir. Ayr\u0131ca, .transaction()<\/code> veya withAnimation()<\/code> bloklar\u0131n\u0131 do\u011fru kullanarak animasyonlar\u0131n ak\u0131c\u0131l\u0131\u011f\u0131n\u0131 art\u0131rabilirsiniz.<\/p>\n<\/li>\nView<\/code> protokol\u00fcne uyan herhangi bir \u00f6\u011fe \u00fczerinde bu t\u00fcr efektler uygulanabilir.<\/p>\n<\/li>\nGeometryReader<\/code>'\u0131n performansa etkisi nedir?<\/strong><\/p>\nGeometryReader<\/code>, i\u00e7eri\u011finin boyutunu ve konumunu dinamik olarak okudu\u011fu i\u00e7in, her kayd\u0131rma olay\u0131nda bu bilgiyi yeniden hesaplamas\u0131 gerekir. E\u011fer bir ScrollView<\/code> i\u00e7inde \u00e7ok say\u0131da GeometryReader<\/code> veya i\u00e7 i\u00e7e ge\u00e7mi\u015f karma\u015f\u0131k GeometryReader<\/code> yap\u0131lar\u0131 kullan\u0131l\u0131yorsa, bu durum her kayd\u0131rma d\u00f6ng\u00fcs\u00fcnde fazla hesaplama y\u00fck\u00fcne yol a\u00e7arak performans\u0131 d\u00fc\u015f\u00fcrebilir. M\u00fcmk\u00fcn oldu\u011funca az GeometryReader<\/code> kullanmaya veya PreferenceKey<\/code> gibi daha optimize yakla\u015f\u0131mlar\u0131 de\u011ferlendirmeye \u00e7al\u0131\u015f\u0131n. iOS 17 ile gelen .scrollTransition<\/code> gibi modifier'lar bu t\u00fcr efektleri daha performansl\u0131 hale getirmek i\u00e7in tasarlanm\u0131\u015ft\u0131r.<\/p>\n<\/li>\n