Sobes.tech
Middle

O que é matchedGeometryEffect no SwiftUI?

sobes.tech IA

Resposta da IA

O matchedGeometryEffect no SwiftUI é um modificador que permite animar suavemente a mudança de tamanho e posição das vistas ao mover-se entre diferentes hierarquias ou contêineres.

Princípios básicos:

  • Correspondência de identificadores: Você indica o mesmo identificador (id) para as vistas que deseja animar durante a transição.
  • Fonte e destino: Você especifica um espaço de nomes (namespace) que une essas vistas.
  • Animação automática: SwiftUI calcula automaticamente os estados intermediários e anima a transição de um estado para outro.

Aplicação:

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

Neste exemplo, RoundedRectangle muda de tamanho e cor ao alternar entre os estados isExpanded, usando matchedGeometryEffect com o identificador "box" e o espaço de nomes namespace. O SwiftUI anima automaticamente essa mudança.