Ce este matchedGeometryEffect și cum îl folosești în SwiftUI?

matchedGeometryEffect este un modifier în SwiftUI care permite animarea lină a schimbării dimensiunii și poziției unei vizualizări în timpul trecerii între diferite stări sau ierarhii de vizualizări. Sincronizează geometria (dimensiunea și poziția) vizualizărilor în diferite părți ale ierarhiei, creând un efect de "potrivire".

Utilizare:

1. Definirea id și a spațiului de animație:

   • Atribuiți un id unic tuturor vizualizărilor care trebuie sincronizate, folosind modificatorul matchedGeometryEffect.
   • Specificați un namespace (spațiu de nume). namespace leagă vizualizările care trebuie animate împreună. De obicei, se folosește adnotarea @Namespace private var namespace.

2. Aplicarea la vizualizări:

   • Aplicați matchedGeometryEffect fiecărei vizualizări care participă la animație, indicând același id și namespace.
   • Modificați vizibilitatea sau poziția vizualizărilor, de exemplu, folosind condiții if/else sau schimbând starea care afectează aspectul. SwiftUI animatează automat tranziția.

struct ContentView: View {
    @Namespace private var animationNamespace // Declararea spațiului de nume
    @State private var isExpanded = false

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

            Button("Toggle Size") {
                withAnimation { // Utilizarea withAnimation pentru tranziție lină
                    isExpanded.toggle()
                }
            }
        }
    }
}

Puncte cheie:

• Același id și namespace pentru vizualizări corespunzătoare.
• Modificările trebuie să aibă loc în interiorul blocului de animație (de exemplu, cu withAnimation).
• Permite crearea de tranziții complexe între diferite stări de aspect.
• Poate fi utilizat cu diferiți modificatori care influențează dimensiunea și poziția (frame, padding, offset, etc.).

matchedGeometryEffect simplifică foarte mult crearea animațiilor complexe de transformare a vizualizărilor comparativ cu calcularea și animarea manuală a parametrilor cadrului.