Wat is matchedGeometryEffect in SwiftUI?

matchedGeometryEffect in SwiftUI is een modifier die het mogelijk maakt om soepel de verandering in grootte en positie van views te animeren tijdens het bewegen tussen verschillende hiërarchieën of containers.

Basisprincipes:

• Identificatie matching: Je geeft hetzelfde id op voor views die je tijdens de overgang wilt animeren.
• Bron en doel: Je specificeert een namespace dat deze views verbindt.
• Automatische animatie: SwiftUI berekent automatisch de tussenliggende staten en animeert de overgang van de ene naar de andere staat.

Toepassing:

import SwiftUI

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

    var body: some View {
        VStack {
            if isExpanded {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.blue)
                    .matchedGeometryEffect(id: "box", in: namespace)
                    .frame(width: 200, height: 200)
                    .onTapGesture {
                        withAnimation {
                            isExpanded.toggle()
                        }
                    }
            } else {
                RoundedRectangle(cornerRadius: 5)
                    .fill(Color.red)
                    .matchedGeometryEffect(id: "box", in: namespace)
                    .frame(width: 50, height: 50)
                    .onTapGesture {
                        withAnimation {
                            isExpanded.toggle()
                        }
                    }
            }
        }
    }
}

In dit voorbeeld verandert RoundedRectangle van grootte en kleur bij het schakelen tussen de staten isExpanded, gebruikmakend van matchedGeometryEffect met de identifier `