SwiftUI ile matchedGeometryEffect kullanımı

Merhabalar bu yazımda SwiftUI ile nesnelere kolay bir şekilde animasyon bağlama işlemi yapacağımız matchedGeometryEffect kullanımını paylaşacağım.

Mobil uygulama geliştirirken animasyonlar son kullanıcıya daha çekici uygulamalar sunmak için önemlidir. UIKit ile yaptığımız bir çok zorlu animasyon işlemlerini SwiftUI ile oldukça kolay, az satır kod yazarak ve daha verimli şekilde gerçekleştirebiliyoruz.

Nesnelerin state durumlarına göre bir birlerine matchedGeometryEffect bağlayarak oldukça güzel animasyonlar oluşturulabilir. Bu işlem ile UIKit ile kullandığımız Hero animation framework benzeri büyüme ve olduğu konuma geri dönerek küçülme tarzı animasyonları gerçekleştirebilmemizi sağlamakta.

Aşağıda yazdığım örneği deneyip, farklı çalışmalar yapabilirsiniz.

struct ContentView: View {
    
    @Namespace private var animation
    @State private var isTap = false

    var body: some View {
        VStack {
            if isTap {
                VStack {
                    Image(systemName: "globe")
                        .resizable()
                        .frame(width: 32, height: 32, alignment: .center)
                        .foregroundColor(.red)
                        .matchedGeometryEffect(id: "ImageAnimation", in: animation)
                    Text("Hello World")
                        .matchedGeometryEffect(id: "TextAnimation", in: animation)
                        .font(.system(size: 20))
                }
            } else {
                HStack {
                    Image(systemName: "globe")
                        .resizable()
                        .frame(width: 32, height: 32, alignment: .center)
                        .foregroundColor(.blue)
                        .matchedGeometryEffect(id: "ImageAnimation", in: animation)
                    Text("Hello World")
                        .matchedGeometryEffect(id: "TextAnimation", in: animation)
                        .font(.system(size: 20))
                }
            }
        }
        .onTapGesture {
            withAnimation {
                self.isTap.toggle()
            }
        }
    }
}

Not: Burda önemli olan aynı nesnelerin ortak animasyonda eşleşmesini istiyorsanız, aynı id değeri vermeniz gerekli. Ve bu animasyonlar aynı namespace içerisinde olmalılar.