Sobes.tech
Middle

Was ist matchedGeometryEffect in SwiftUI?

sobes.tech KI

Antwort von AI

matchedGeometryEffect in SwiftUI ist ein Modifier, der es ermöglicht, die Größen- und Positionsänderung von Ansichten beim Verschieben zwischen verschiedenen Hierarchien oder Containern sanft zu animieren.

Grundprinzipien:

  • Identifikator-Zuordnung: Sie geben denselben id für die Ansichten an, die Sie beim Übergang animieren möchten.
  • Quelle und Ziel: Sie spezifizieren einen Namensraum (namespace), der diese Ansichten verbindet.
  • Automatische Animation: SwiftUI berechnet automatisch Zwischenzustände und animiert den Übergang von einem Zustand zum anderen.

Anwendung:

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 diesem Beispiel ändert RoundedRectangle seine Größe und Farbe beim Umschalten zwischen den Zuständen isExpanded, unter Verwendung von matchedGeometryEffect mit der ID "box" und dem Namensraum namespace. SwiftUI animiert diese Änderung automatisch.