Wat is matchedGeometryEffect en hoe gebruik je het in SwiftUI?

matchedGeometryEffect is een modifier in SwiftUI waarmee je soepel de verandering in grootte en positie van een view kunt animeren tijdens het schakelen tussen verschillende toestanden of hiërarchieën van views. Het synchroniseert de geometrie (grootte en positie) van views in verschillende delen van de hiërarchie, waardoor een "matching"-effect ontstaat.

Gebruik:

1. Definitie van id en animatieruimte:

   • Ken een unieke id toe aan alle views die gesynchroniseerd moeten worden, met behulp van de modifier matchedGeometryEffect.
   • Geef een namespace (naamruimte voor de animatie) op. De namespace verbindt de views die samen geanimeerd moeten worden. Gewoonlijk wordt de annotatie @Namespace private var namespace gebruikt.

2. Toepassing op views:

   • Pas matchedGeometryEffect toe op elke view die deelneemt aan de animatie, met dezelfde id en namespace.
   • Verander de zichtbaarheid of positie van de views, bijvoorbeeld door if/else-voorwaarden te gebruiken of door de toestand te wijzigen die de lay-out beïnvloedt. SwiftUI animeert de overgang automatisch.

struct ContentView: View {
    @Namespace private var animationNamespace // Declaratie van de naamruimte
    @State private var isExpanded = false

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

            Button("Toggle Size") {
                withAnimation { // Gebruik van withAnimation voor een vloeiende overgang
                    isExpanded.toggle()
                }
            }
        }
    }
}

Belangrijke punten:

• Zelfde id en namespace voor corresponderende views.
• Veranderingen moeten binnen de animatieblok plaatsvinden (bijvoorbeeld met withAnimation).
• Maakt het mogelijk om complexe overgangen tussen verschillende lay-outtoestanden te creëren.
• Kan worden gebruikt met verschillende modifiers die invloed hebben op grootte en positie (frame, padding, offset, enz.).

matchedGeometryEffect vereenvoudigt het maken van complexe transformatie-animaties van views aanzienlijk in vergelijking met handmatig berekenen en animeren van frame-parameters.