¿Qué es matchedGeometryEffect y cómo se usa en SwiftUI?
sobes.tech AI
Respuesta de la IA
matchedGeometryEffect en SwiftUI se utiliza para crear una animación suave de transición entre dos vistas que representan el mismo elemento visual en diferentes diseños. Vincula la geometría de la vista en un estado con la geometría de otra vista en otro estado, permitiendo que SwiftUI anime automáticamente los cambios.
Se usa aplicando el modificador .matchedGeometryEffect a ambas vistas que deben estar vinculadas. El modificador acepta tres parámetros:
id: Identificador único para enlazar las vistas.in: Espacio de nombres (Namespace) donde se registra el identificador. Normalmente se crea con@Namespace.properties: Conjunto de propiedades de geometría que deben ser animadas (por ejemplo,.position,.size,.frame).
Ejemplo de uso:
struct ContentView: View {
@Namespace private var animation
@State private var isExpanded = false
var body: some View {
VStack {
if isExpanded {
Rectangle()
.fill(Color.blue)
.matchedGeometryEffect(id: "myShape", in: animation)
.frame(width: 200, height: 200)
.onTapGesture {
withAnimation {
isExpanded.toggle()
}
}
} else {
Rectangle()
.fill(Color.red)
.matchedGeometryEffect(id: "myShape", in: animation)
.frame(width: 50, height: 50)
.onTapGesture {
withAnimation {
isExpanded.toggle()
}
}
}
}
}
}
En este ejemplo, .matchedGeometryEffect enlaza dos Rectangle con el mismo id ("myShape") y en el mismo espacio de nombres (animation). Cuando isExpanded cambia, SwiftUI anima la transición entre los dos estados, creando un efecto suave de cambio de tamaño y posición del rectángulo.