¿Qué es matchedGeometryEffect y cómo se usa en SwiftUI?

matchedGeometryEffect - es un modificador en SwiftUI que permite animar suavemente el cambio de tamaño y posición de una vista al cambiar entre diferentes estados o jerarquías de vistas. Sincroniza la geometría (tamaño y posición) de las vistas en diferentes partes de la jerarquía, creando un efecto de "coincidencia".

Uso:

1. Definición de id y espacio de animación:

   • Asignar un id único a todas las vistas que deben estar sincronizadas, usando el modificador matchedGeometryEffect.
   • Especificar namespace (espacio de nombres de la animación). namespace conecta las vistas que deben animarse juntas. Normalmente, se usa la anotación @Namespace private var namespace.

2. Aplicación a las vistas:

   • Aplicar matchedGeometryEffect a cada vista que participa en la animación, indicando el mismo id y namespace.
   • Cambiar la visibilidad o posición de las vistas, por ejemplo, usando condiciones if/else o modificando el estado que afecta la disposición. SwiftUI anima automáticamente la transición.

struct ContentView: View {
    @Namespace private var animationNamespace // Declaración del espacio de nombres
    @State private var isExpanded = false

    var body: some View {
        VStack {
            if isExpanded {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.blue)
                    .matchedGeometryEffect(id: "myShape", in: animationNamespace) // Aplicación con id y namespace
                    .frame(width: 300, height: 200)
            } else {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.red)
                    .matchedGeometryEffect(id: "myShape", in: animationNamespace) // Aplicación con el mismo id y namespace
                    .frame(width: 50, height: 50)
            }

            Button("Toggle Size") {
                withAnimation { // Uso de withAnimation para transición suave
                    isExpanded.toggle()
                }
            }
        }
    }
}

Puntos clave:

• Mismo id y namespace para vistas relacionadas.
• Los cambios deben ocurrir dentro del bloque de animación (por ejemplo, con withAnimation).
• Permite crear transiciones complejas entre diferentes estados de disposición.
• Puede usarse con diversos modificadores que afectan tamaño y posición (frame, padding, offset, etc.).

matchedGeometryEffect simplifica mucho la creación de animaciones complejas de transformación de vistas en comparación con calcular y animar manualmente los parámetros del marco.