Sobes.tech
Middle+

O que é matchedGeometryEffect e como usá-lo no SwiftUI?

sobes.tech IA

Resposta da IA

O matchedGeometryEffect no SwiftUI é usado para criar uma animação suave de transição entre duas visualizações que representam o mesmo elemento visual em diferentes layouts. Ele liga a geometria de uma visualização em um estado à geometria de outra visualização em outro estado, permitindo que o SwiftUI anime automaticamente as mudanças.

É utilizado aplicando o modificador .matchedGeometryEffect às duas visualizações que devem estar vinculadas. O modificador aceita três parâmetros:

  1. id: Identificador único para ligar as visualizações.
  2. in: Espaço de nomes (Namespace) onde o identificador é registrado. Normalmente criado com @Namespace.
  3. properties: Conjunto de propriedades de geometria que devem ser animadas (por exemplo, .position, .size, .frame).

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

Neste exemplo, .matchedGeometryEffect liga dois Rectangle com o mesmo id ("myShape") e no mesmo espaço de nomes (animation). Quando isExpanded muda, o SwiftUI anima a transição entre os dois estados, criando um efeito suave de mudança de tamanho e posição do retângulo.