Swift Academy · Pelajaran

matchedGeometryEffect untuk Peralihan Hero

Cipta animasi hero yang lancar antara view dengan ruang nama dan ID yang dipadankan.

Pelajaran 2 daripada 413 langkah

matchedGeometryEffect untuk Peralihan Hero ialah pelajaran Swift Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Swift Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Swift Academy merangkumi sejumlah 4 pelajaran.

Apakah matchedGeometryEffect?

matchedGeometryEffect menganimasikan kedudukan dan saiz paparan antara dua keadaan, lalu menghasilkan peralihan "wira".

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

Mencipta Namespace

Isytiharkan @Namespace dalam paparan induk. Semua paparan yang dipadankan berkongsi ruang nama ini.

struct ParentView: View {
  @Namespace private var heroNamespace
}

Menggunakan Modifier

Gunakan .matchedGeometryEffect(id:in:) dengan id yang sama pada paparan sumber dan destinasi.

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

Mencetuskan Peralihan

Balut perubahan keadaan dalam withAnimation untuk menganimasikan geometri antara kedua-dua paparan.

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

Wira daripada Senarai ke Perincian

Pola wira klasik: ketik item senarai dan item itu berkembang menjadi perincian skrin penuh menggunakan 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)
}

Parameter isSource

Apabila dua paparan berkongsi id, tandakan asal dengan isSource: true (lalai) dan destinasi dengan isSource: false.

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

Sifat Sauh dan Saiz

Sesuaikan titik sauh dan sifat geometri (kedudukan/saiz) yang hendak dipadankan.

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

Menggabungkan dengan AnyTransition

Gabungkan animasi wira dengan .transition untuk turut mengawal cara kandungan muncul secara beransur atau meluncur masuk.

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

Berbilang Wira dalam Senarai

Gunakan ID unik yang diperoleh daripada pengecam item untuk menjalankan beberapa animasi wira yang berasingan.

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

Kesilapan Lazim

Kedua-dua paparan dengan ID yang sama tidak boleh muncul serentak — hanya satu yang patut kelihatan pada satu-satu masa, jika tidak, gangguan susun atur akan berlaku.

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

Petua Prestasi

Pastikan paparan yang dipadankan ringkas. Hierarki kompleks di dalam paparan yang dipadankan boleh menyebabkan bingkai tercicir semasa animasi.

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

Semakan Pantas

Apakah yang diperlukan untuk memautkan dua paparan sebagai sumber dan destinasi dalam peralihan wira?

Jawab dalam pelajaran interaktif

Ringkasan Pelajaran

Cipta peralihan wira dengan @Namespace dan .matchedGeometryEffect(id:in:). Balut perubahan keadaan dalam withAnimation. Pastikan hanya satu paparan yang dipadankan kelihatan pada satu-satu masa untuk mengelakkan konflik susun atur.

Percuma untuk bermula

Pelajari Swift dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 122
Pelajaran: 409

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “matchedGeometryEffect untuk Peralihan Hero” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Swift Academy, termasuk “matchedGeometryEffect untuk Peralihan Hero”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Swift Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “matchedGeometryEffect untuk Peralihan Hero”?

Cipta animasi hero yang lancar antara view dengan ruang nama dan ID yang dipadankan. Anda berlatih Swift Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Swift Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Swift Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “matchedGeometryEffect untuk Peralihan Hero” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Swift Academy ini?

Ya. Setiap pelajaran Swift Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Animasi Implisit berbanding Eksplisit
matchedGeometryEffect untuk Peralihan Hero
AnimatableModifier dan Animatable Tersuai
TimelineView dan Canvas untuk Lukisan Berprestasi Tinggi

← Kembali ke Swift Academy