Hero 전환을 위한 matchedGeometryEffect

matchedGeometryEffect란 무엇인가요

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

네임스페이스 만들기

struct ParentView: View {
  @Namespace private var heroNamespace
}

수정자 적용하기

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

전환 실행하기

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

목록에서 상세 화면으로 히어로 전환

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

isSource 매개변수

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

앵커 및 크기 속성

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

AnyTransition와 결합하기

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

목록에서 여러 히어로 사용하기

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

일반적인 주의 사항

// 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

성능 팁

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

빠른 확인

강의 요약