Wat is matchedGeometryEffect en hoe wordt het gebruikt in SwiftUI?

matchedGeometryEffect in SwiftUI wordt gebruikt om een vloeiende overgangsanimatie te creëren tussen twee weergaven die hetzelfde visuele element in verschillende lay-outs weergeven. Het verbindt de geometrie van een weergave in één toestand met die van een andere weergave in een andere toestand, waardoor SwiftUI automatisch de wijzigingen kan animeren.

Het wordt toegepast door de modifier .matchedGeometryEffect op beide weergaven die verbonden moeten worden. De modifier accepteert drie parameters:

1. id: Unieke identificatie om de weergaven te koppelen.
2. in: Naamruimte (Namespace) waarin de identificatie is geregistreerd. Meestal gemaakt met @Namespace.
3. properties: Geometrische eigenschappen die geanimeerd moeten worden (bijvoorbeeld .position, .size, .frame).

Voorbeeld van gebruik:

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

    var body: some View {
        VStack {
            if isExpanded {
                Rectangle()
                    .fill(Color.blue)
                    .matchedGeometryEffect(id: "myShape", in: animation)
                    .frame(width: 200, height: 200)
                    .onTapGesture {
                        withAnimation {
                            isExpanded.toggle()
                        }
                    }
            } else {
                Rectangle()
                    .fill(Color.red)
                    .matchedGeometryEffect(id: "myShape", in: animation)
                    .frame(width: 50, height: 50)
                    .onTapGesture {
                        withAnimation {
                            isExpanded.toggle()
                        }
                    }
            }
        }
    }
}

In dit voorbeeld verbindt .matchedGeometryEffect twee Rectangle-elementen met dezelfde id ("myShape") en in dezelfde naamruimte (animation). Wanneer isExpanded verandert, animeert SwiftUI de overgang tussen de twee toestanden, waardoor een vloeiend effect ontstaat bij het veranderen van grootte en positie van de rechthoek.