0Pricing
Swift Academy · Aula

matchedGeometryEffect para transições hero

Crie animações hero contínuas entre views usando namespace e identificadores correspondentes.

matchedGeometryEffect para transições hero é uma aula grátis de Swift Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Swift Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Swift Academy inclui 4 aulas no total.

O que é matchedGeometryEffect?

matchedGeometryEffect anima a posição e o tamanho de uma visualização entre dois estados, criando uma "transição de destaque".

struct HeroDemo: View {
  @Namespace private var ns
  @State private var expanded = false
  var body: some View {
    if expanded {
      BigCard().matchedGeometryEffect(id: "card", in: ns)
    } else {
      SmallCard().matchedGeometryEffect(id: "card", in: ns)
    }
  }
}

Criando um espaço de nomes

Declare um @Namespace na visualização pai. Todas as visualizações correspondentes compartilham esse espaço de nomes.

struct ParentView: View {
  @Namespace private var heroNamespace
}

Aplicando o modificador

Aplique .matchedGeometryEffect(id:in:) com o mesmo id às visualizações de origem e de destino.

Image("cover")
  .matchedGeometryEffect(id: "albumArt", in: heroNamespace)

Acionando a transição

Envolva a alteração de estado em withAnimation para animar a geometria entre as duas visualizações.

Button("Expand") {
  withAnimation(.spring()) {
    isExpanded.toggle()
  }
}

Destaque da lista para os detalhes

Um padrão clássico de destaque: toque em um item da lista e ele se expande para uma tela de detalhes em tela cheia usando matchedGeometryEffect.

ForEach(items) { item in
  ThumbnailRow(item: item)
    .matchedGeometryEffect(id: item.id, in: ns)
    .onTapGesture { withAnimation { selected = item } }
}
if let sel = selected {
  DetailView(item: sel)
    .matchedGeometryEffect(id: sel.id, in: ns)
}

Parâmetro isSource

Quando duas visualizações compartilham um identificador, marque a origem com isSource: true (padrão) e o destino com isSource: false.

SmallImage()
  .matchedGeometryEffect(id: "img", in: ns, isSource: true)
LargeImage()
  .matchedGeometryEffect(id: "img", in: ns, isSource: false)

Propriedades de âncora e tamanho

Personalize qual ponto de âncora e quais propriedades geométricas (posição/tamanho) serão correspondidos.

.matchedGeometryEffect(
  id: "box",
  in: ns,
  anchor: .center,
  properties: [.position, .size]
)

Combinando com AnyTransition

Combine a animação de destaque com .transition para controlar também como o conteúdo aparece gradualmente ou desliza para dentro.

DetailView()
  .matchedGeometryEffect(id: "card", in: ns)
  .transition(.opacity)

Vários destaques em uma lista

Use identificadores exclusivos derivados dos identificadores dos itens para executar várias animações de destaque independentes.

ForEach(products) { p in
  ProductCard(p)
    .matchedGeometryEffect(id: p.id, in: ns)
}

Armadilhas comuns

As duas visualizações com o mesmo identificador não podem aparecer simultaneamente — somente uma deve estar visível a cada momento; caso contrário, ocorrerão problemas de disposição.

// Wrong: both views visible at same time
Small().matchedGeometryEffect(id: "x", in: ns)
Large().matchedGeometryEffect(id: "x", in: ns)
// Correct: use if/else or ZStack with opacity toggling

Dica de desempenho

Mantenha as visualizações correspondentes leves. Hierarquias complexas dentro delas podem causar perda de quadros durante a animação.

// Prefer simple shapes inside matched containers
// Move heavy content outside the matched frame

Verificação rápida

O que é necessário para vincular duas visualizações como origem e destino em uma transição de destaque?

Recapitulação da lição

Crie transições de destaque com @Namespace e .matchedGeometryEffect(id:in:). Envolva as alterações de estado em withAnimation. Garanta que somente uma visualização correspondente esteja visível por vez para evitar conflitos de disposição.

Perguntas Frequentes

A aula “matchedGeometryEffect para transições hero” é grátis?

Sim — o texto completo de “matchedGeometryEffect para transições hero” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Swift Academy, atualize para CoddyKit PRO. O curso de Swift Academy inclui 4 aulas no total.

O que vou aprender em “matchedGeometryEffect para transições hero”?

Crie animações hero contínuas entre views usando namespace e identificadores correspondentes. Você pratica Swift Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Swift Academy?

Nenhuma experiência prévia é necessária. Swift Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “matchedGeometryEffect para transições hero”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Swift Academy?

Sim. Cada aula de Swift Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Animações implícitas e explícitas
  2. matchedGeometryEffect para transições hero
  3. AnimatableModifier e Animatable personalizados
  4. TimelineView e Canvas para desenho de alto desempenho
← Voltar para Swift Academy