Swift Academy · Lektion

matchedGeometryEffect für Hero-Übergänge

Erstellen Sie nahtlose Hero-Animationen zwischen Views mit Namespace und übereinstimmenden IDs.

matchedGeometryEffect für Hero-Übergänge ist eine kostenlose Swift Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Swift Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Swift Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist matchedGeometryEffect?

matchedGeometryEffect animiert die Position und Größe einer Ansicht zwischen zwei Zuständen und erzeugt so einen „Hero“-Übergang.

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

Eine Namespace erstellen

Deklarieren Sie ein @Namespace in der übergeordneten Ansicht. Alle verknüpften Ansichten verwenden diesen Namespace gemeinsam.

struct ParentView: View {
  @Namespace private var heroNamespace
}

Den Modifier anwenden

Wenden Sie .matchedGeometryEffect(id:in:) mit derselben id sowohl auf die Quell- als auch auf die Zielansicht an.

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

Den Übergang auslösen

Schließen Sie die Zustandsänderung in withAnimation ein, um die Geometrie zwischen den beiden Ansichten zu animieren.

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

Hero-Übergang von Liste zu Detail

Ein klassisches Hero-Muster: Tippen Sie auf ein Listenelement, und es wird mithilfe von matchedGeometryEffect zu einer bildschirmfüllenden Detailansicht erweitert.

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

Der Parameter isSource

Wenn zwei Ansichten dieselbe ID verwenden, markieren Sie den Ursprung mit isSource: true (Standardwert) und das Ziel mit isSource: false.

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

Anker- und Größeneigenschaften

Passen Sie an, welcher Ankerpunkt und welche Geometrieeigenschaften (Position/Größe) abgeglichen werden.

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

Mit AnyTransition kombinieren

Kombinieren Sie die Hero-Animation mit .transition, um zusätzlich zu steuern, wie Inhalte eingeblendet oder hereingeschoben werden.

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

Mehrere Heroes in einer Liste

Verwenden Sie eindeutige IDs, die aus den Bezeichnern der Elemente abgeleitet werden, um mehrere unabhängige Hero-Animationen auszuführen.

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

Häufige Stolperfallen

Beide Ansichten mit derselben ID dürfen nicht gleichzeitig erscheinen – zu jedem Zeitpunkt sollte nur eine sichtbar sein, andernfalls treten Layoutfehler auf.

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

Tipp zur Leistung

Halten Sie verknüpfte Ansichten schlank. Komplexe Hierarchien innerhalb verknüpfter Ansichten können während der Animation zu ausgelassenen Frames führen.

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

Kurze Überprüfung

Was ist erforderlich, um zwei Ansichten in einem Hero-Übergang als Quelle und Ziel zu verknüpfen?

Zusammenfassung der Lektion

Erstellen Sie Hero-Übergänge mit @Namespace und .matchedGeometryEffect(id:in:). Schließen Sie Zustandsänderungen in withAnimation ein. Stellen Sie sicher, dass jeweils nur eine verknüpfte Ansicht sichtbar ist, um Layoutkonflikte zu vermeiden.

Häufig gestellte Fragen

Ist die Lektion „matchedGeometryEffect für Hero-Übergänge“ kostenlos?

Ja — der vollständige Text von „matchedGeometryEffect für Hero-Übergänge“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Swift Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Swift Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „matchedGeometryEffect für Hero-Übergänge“?

Erstellen Sie nahtlose Hero-Animationen zwischen Views mit Namespace und übereinstimmenden IDs. Du übst Swift Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Swift Academy zu starten?

Keine Vorkenntnisse erforderlich. Swift Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „matchedGeometryEffect für Hero-Übergänge“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Swift Academy-Lektion Code schreiben und ausführen?

Ja. Jede Swift Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Implizite vs. explizite Animationen
matchedGeometryEffect für Hero-Übergänge
Benutzerdefinierter AnimatableModifier und Animatable
TimelineView und Canvas für leistungsstarkes Zeichnen

← Zurück zu Swift Academy