Cos'è matchedGeometryEffect e come usarlo in SwiftUI?

matchedGeometryEffect è un modificatore in SwiftUI che consente di animare fluidamente il cambiamento di dimensione e posizione di una vista durante il passaggio tra diversi stati o gerarchie di viste. Sincronizza la geometria (dimensione e posizione) delle viste in diverse parti della gerarchia, creando un effetto di "corrispondenza".

Utilizzo:

1. Definizione di id e spazio di animazione:

   • Assegnare un id unico a tutte le viste che devono essere sincronizzate, usando il modificatore matchedGeometryEffect.
   • Specificare un namespace (spazio dei nomi dell'animazione). Il namespace collega le viste che devono essere animate insieme. Di solito si usa l'annotazione @Namespace private var namespace.

2. Applicazione alle viste:

   • Applicare matchedGeometryEffect a ogni vista che partecipa all'animazione, indicando lo stesso id e namespace.
   • Modificare la visibilità o la posizione delle viste, ad esempio usando condizioni if/else o modificando lo stato che influenza il layout. SwiftUI anima automaticamente la transizione.

struct ContentView: View {
    @Namespace private var animationNamespace // Dichiarazione dello spazio dei nomi
    @State private var isExpanded = false

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

            Button("Toggle Size") {
                withAnimation { // Uso di withAnimation per transizione fluida
                    isExpanded.toggle()
                }
            }
        }
    }
}

Punti chiave:

• Stesso id e namespace per viste corrispondenti.
• Le modifiche devono avvenire all'interno del blocco di animazione (ad esempio, con withAnimation).
• Permette di creare transizioni complesse tra diversi stati di layout.
• Può essere usato con vari modificatori che influenzano dimensione e posizione (frame, padding, offset, ecc.).

matchedGeometryEffect semplifica notevolmente la creazione di animazioni di trasformazione complesse rispetto al calcolo e all'animazione manuale dei parametri del frame.