Czym jest matchedGeometryEffect i jak go używać w SwiftUI?

matchedGeometryEffect to modyfikator w SwiftUI, który pozwala na płynne animowanie zmiany rozmiaru i położenia widoku podczas przejścia między różnymi stanami lub hierarchiami widoków. Synchronizuje geometrię (rozmiar i pozycję) widoków w różnych częściach hierarchii, tworząc efekt "dopasowania".

Użycie:

1. Definicja id i przestrzeni animacji:

   • Przypisz unikalny id wszystkim widokom, które mają być synchronizowane, używając modyfikatora matchedGeometryEffect.
   • Określ namespace (przestrzeń nazw animacji). namespace łączy widoki, które mają być animowane razem. Zazwyczaj używa się adnotacji @Namespace private var namespace.

2. Zastosowanie do widoków:

   • Zastosuj matchedGeometryEffect do każdego widoku biorącego udział w animacji, podając ten sam id i namespace.
   • Zmieniaj widoczność lub pozycję widoków, np. używając warunków if/else lub zmieniając stan wpływający na układ. SwiftUI automatycznie animuje przejście.

struct ContentView: View {
    @Namespace private var animationNamespace // Deklaracja przestrzeni nazw
    @State private var isExpanded = false

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

            Button("Toggle Size") {
                withAnimation { // Użycie withAnimation dla płynnego przejścia
                    isExpanded.toggle()
                }
            }
        }
    }
}

Kluczowe punkty:

• Ten sam id i namespace dla powiązanych widoków.
• Zmiany muszą zachodzić w obrębie bloku animacji (np. z withAnimation).
• Umożliwia tworzenie złożonych przejść między różnymi stanami układu.
• Może być używany z różnymi modyfikatorami wpływającymi na rozmiar i pozycję (frame, padding, offset itd.).

matchedGeometryEffect znacznie upraszcza tworzenie złożonych animacji transformacji widoków w porównaniu do ręcznego obliczania i animowania parametrów ramki.