matchedGeometryEffect nedir ve SwiftUI'da nasıl kullanılır?

matchedGeometryEffect, SwiftUI'da, farklı durumlar veya görünüm hiyerarşileri arasında geçiş sırasında görünüm boyutunu ve konumunu pürüzsüzce animasyonla değiştirmeyi sağlayan bir modifikatördür. Bu, farklı hiyerarşilerdeki görünümlerin geometrisini (boyut ve konum) senkronize eder ve "eşleşme" etkisi yaratır.

Kullanım:

1. id ve animasyon alanının tanımlanması:

   • Senkronize edilmesi gereken tüm görünümlere benzersiz bir id atayın ve matchedGeometryEffect modifikatorünü kullanın.
   • namespace (isim alanı) belirtin. namespace, birlikte animasyon yapılacak görünümleri bağlar. Genellikle @Namespace private var namespace anotasyonu kullanılır.

2. Görünümlere uygulama:

   • Aynı id ve namespace kullanarak her görünümde matchedGeometryEffect uygulayın.
   • Görünümlerin görünürlüğünü veya konumunu değiştirin, örneğin if/else koşulları veya durumu değiştirerek düzenlemeyi etkileyin. SwiftUI otomatik olarak geçişi animasyonlar.

struct ContentView: View {
    @Namespace private var animationNamespace // İsim alanını tanımlama
    @State private var isExpanded = false

    var body: some View {
        VStack {
            if isExpanded {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.blue)
                    .matchedGeometryEffect(id: "myShape", in: animationNamespace) // id ve namespace ile uygulama
                    .frame(width: 300, height: 200)
            } else {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.red)
                    .matchedGeometryEffect(id: "myShape", in: animationNamespace) // aynı id ve namespace ile uygulama
                    .frame(width: 50, height: 50)
            }

            Button("Toggle Size") {
                withAnimation { // Yumuşak geçiş için withAnimation kullanımı
                    isExpanded.toggle()
                }
            }
        }
    }
}

Ana noktalar:

• Aynı id ve namespace kullanımı, eşleşen görünümler için.
• Değişiklikler, animasyon bloğu içinde olmalı (örneğin, withAnimation ile).
• Farklı düzen durumları arasında karmaşık geçişler oluşturmayı sağlar.
• Boyut ve konumu etkileyen çeşitli modifikatorlerle kullanılabilir (frame, padding, offset vb.).

matchedGeometryEffect, görünüm dönüşüm animasyonlarının manuel hesaplamalara göre çok daha kolay yapılmasını sağlar.