Was ist matchedGeometryEffect und wie wird es in SwiftUI verwendet?

matchedGeometryEffect in SwiftUI wird verwendet, um eine fließende Übergangsanimation zwischen zwei Ansichten zu erstellen, die dasselbe visuelle Element in verschiedenen Layouts darstellen. Es verbindet die Geometrie der Ansicht in einem Zustand mit der Geometrie einer anderen Ansicht in einem anderen Zustand, sodass SwiftUI die Änderungen automatisch animieren kann.

Es wird angewendet, indem der Modifikator .matchedGeometryEffect auf beide Ansichten angewendet wird, die verbunden werden sollen. Der Modifikator akzeptiert drei Parameter:

1. id: Eindeutiger Bezeichner zur Verbindung der Ansichten.
2. in: Namensraum (Namespace), in dem die ID registriert ist. Wird normalerweise mit @Namespace erstellt.
3. properties: Menge der geometrischen Eigenschaften, die animiert werden sollen (z.B. .position, .size, .frame).

Beispiel für die Verwendung:

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 diesem Beispiel verbindet .matchedGeometryEffect zwei Rectangle mit derselben id ("myShape") und im selben Namensraum (animation). Wenn isExpanded umgeschaltet wird, animiert SwiftUI den Übergang zwischen den beiden Zuständen, was einen sanften Effekt bei Größen- und Positionsänderungen des Rechtecks erzeugt.