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

O matchedGeometryEffect é um modificador no SwiftUI que permite animar suavemente a mudança de tamanho e posição de uma vista ao transitar entre diferentes estados ou hierarquias de vistas. Sincroniza a geometria (tamanho e posição) das vistas em diferentes partes da hierarquia, criando um efeito de "correspondência".

Utilização:

1. Definir id e espaço de animação:

   • Atribuir um id único a todas as vistas que devem ser sincronizadas, usando o modificador matchedGeometryEffect.
   • Especificar um namespace (espaço de nomes da animação). O namespace conecta as vistas que devem ser animadas juntas. Normalmente, usa-se a anotação @Namespace private var namespace.

2. Aplicar às vistas:

   • Aplicar matchedGeometryEffect a cada vista que participa na animação, indicando o mesmo id e namespace.
   • Alterar a visibilidade ou posição das vistas, por exemplo, usando condições if/else ou modificando o estado que afeta a disposição. O SwiftUI anima automaticamente a transição.

struct ContentView: View {
    @Namespace private var animationNamespace // Declaração do espaço de nomes
    @State private var isExpanded = false

    var body: some View {
        VStack {
            if isExpanded {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.blue)
                    .matchedGeometryEffect(id: "myShape", in: animationNamespace) // Aplicação com id e namespace
                    .frame(width: 300, height: 200)
            } else {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.red)
                    .matchedGeometryEffect(id: "myShape", in: animationNamespace) // Aplicação com o mesmo id e namespace
                    .frame(width: 50, height: 50)
            }

            Button("Toggle Size") {
                withAnimation { // Uso de withAnimation para transição suave
                    isExpanded.toggle()
                }
            }
        }
    }
}

Pontos-chave:

• Mesmo id e namespace para vistas relacionadas.
• As mudanças devem ocorrer dentro do bloco de animação (por exemplo, com withAnimation).
• Permite criar transições complexas entre diferentes estados de disposição.
• Pode ser usado com diversos modificadores que afetam tamanho e posição (frame, padding, offset, etc.).

matchedGeometryEffect simplifica bastante a criação de animações complexas de transformação de vistas em comparação com calcular e animar manualmente os parâmetros do quadro.