matchedGeometryEffect untuk Transisi Hero

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

Membuat Namespace

struct ParentView: View {
  @Namespace private var heroNamespace
}

Menerapkan Modifier

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

Memicu Transisi

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

Hero dari Daftar ke Detail

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

Parameter isSource

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

Properti Jangkar dan Ukuran

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

Menggabungkan dengan AnyTransition

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

Beberapa Hero dalam Daftar

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

Kesalahan Umum

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

Tips Performa

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

Pemeriksaan Singkat

Ringkasan Pelajaran