Sobes.tech
Middle

¿Qué es matchedGeometryEffect en SwiftUI?

sobes.tech AI

Respuesta de la IA

matchedGeometryEffect en SwiftUI es un modificador que permite animar suavemente el cambio de tamaño y posición de las vistas al moverlas entre diferentes jerarquías o contenedores.

Principios básicos:

  • Coincidencia de identificadores: Indicas el mismo identificador (id) para las vistas que deseas animar durante la transición.
  • Fuente y destino: Especificas un espacio de nombres (namespace) que une estas vistas.
  • Animación automática: SwiftUI calcula automáticamente los estados intermedios y anima la transición de un estado a otro.

Aplicación:

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()
                        }
                    }
            }
        }
    }
}

En este ejemplo, RoundedRectangle cambia de tamaño y color al alternar entre los estados isExpanded, usando matchedGeometryEffect con el identificador `