Was ist matchedGeometryEffect und wie verwendet man es in SwiftUI?

matchedGeometryEffect ist ein Modifier in SwiftUI, der es ermöglicht, sanft die Größen- und Positionsänderung einer Ansicht beim Übergang zwischen verschiedenen Zuständen oder Hierarchien zu animieren. Es synchronisiert die Geometrie (Größe und Position) der Ansichten in verschiedenen Teilen der Hierarchie und erzeugt einen "Matching"-Effekt.

Verwendung:

1. Definition von id und Animationsraum:

   • Jedem zu synchronisierenden View eine eindeutige id zuweisen, unter Verwendung des Modifiers matchedGeometryEffect.
   • Einen namespace (Namensraum der Animation) angeben. Das namespace verbindet die Views, die zusammen animiert werden sollen. Üblicherweise wird die Annotation @Namespace private var namespace verwendet.

2. Anwendung auf Views:

   • matchedGeometryEffect auf jede View anwenden, die an der Animation beteiligt ist, und dabei dieselbe id und namespace angeben.
   • Sichtbarkeit oder Position der Views ändern, z.B. durch if/else-Bedingungen oder durch Ändern des Zustands, der das Layout beeinflusst. SwiftUI animiert den Übergang automatisch.

struct ContentView: View {
    @Namespace private var animationNamespace // Deklaration des Namensraums
    @State private var isExpanded = false

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

            Button("Toggle Size") {
                withAnimation { // Verwendung von withAnimation für einen sanften Übergang
                    isExpanded.toggle()
                }
            }
        }
    }
}

Wichtige Punkte:

• Gleiche id und namespace für korrespondierende Views.
• Änderungen sollten innerhalb des Animationsblocks erfolgen (z.B. mit withAnimation).
• Ermöglicht die Erstellung komplexer Übergänge zwischen verschiedenen Layout-Zuständen.
• Kann mit verschiedenen Modifikatoren verwendet werden, die Größe und Position beeinflussen (frame, padding, offset usw.).

matchedGeometryEffect vereinfacht die Erstellung komplexer Transformationsanimationen von Views erheblich im Vergleich zur manuellen Berechnung und Animation der Rahmenparameter.