matchedGeometryEffect voor hero-overgangen
Naadloze hero-animaties tussen views maken met een namespace en overeenkomende ID's.
matchedGeometryEffect voor hero-overgangen is een gratis Swift Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Swift Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Swift Academy bevat in totaal 4 lessen.
Wat is matchedGeometryEffect?
matchedGeometryEffect animeert de positie en grootte van een weergave tussen twee toestanden, waardoor een "heldenovergang" ontstaat.
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)
}
}
}Een namespace maken
Declareer een @Namespace in de bovenliggende weergave. Alle gekoppelde weergaven delen deze namespace.
struct ParentView: View {
@Namespace private var heroNamespace
}De modifier toepassen
Pas .matchedGeometryEffect(id:in:) toe met dezelfde id op zowel de bron- als doelweergave.
Image("cover")
.matchedGeometryEffect(id: "albumArt", in: heroNamespace)De overgang starten
Plaats de statuswijziging binnen withAnimation om de geometrie tussen de twee weergaven te animeren.
Button("Expand") {
withAnimation(.spring()) {
isExpanded.toggle()
}
}Van lijst naar detail als heldenovergang
Een klassiek patroon voor een heldenovergang: tik op een lijstitem en het breidt uit naar een detailweergave op volledig scherm met behulp van 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)
}De parameter isSource
Als twee weergaven een id delen, markeer je de oorsprong met isSource: true (standaard) en het doel met isSource: false.
SmallImage()
.matchedGeometryEffect(id: "img", in: ns, isSource: true)
LargeImage()
.matchedGeometryEffect(id: "img", in: ns, isSource: false)Anker- en grootte-eigenschappen
Pas aan welk ankerpunt en welke geometrie-eigenschappen (positie/grootte) worden gekoppeld.
.matchedGeometryEffect(
id: "box",
in: ns,
anchor: .center,
properties: [.position, .size]
)Combineren met AnyTransition
Combineer de heldenanimatie met .transition om ook te bepalen hoe inhoud vervaagt of naar binnen schuift.
DetailView()
.matchedGeometryEffect(id: "card", in: ns)
.transition(.opacity)Meerdere heldenanimaties in een lijst
Gebruik unieke id's die zijn afgeleid van item-id's om meerdere onafhankelijke heldenanimaties uit te voeren.
ForEach(products) { p in
ProductCard(p)
.matchedGeometryEffect(id: p.id, in: ns)
}Veelvoorkomende valkuilen
Beide weergaven met dezelfde id mogen niet tegelijk verschijnen — er mag altijd maar één zichtbaar zijn, anders zie je problemen in de lay-out.
// 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 togglingPrestatietip
Houd gekoppelde weergaven lichtgewicht. Complexe hiërarchieën binnen gekoppelde weergaven kunnen tijdens de animatie voor wegvallende frames zorgen.
// Prefer simple shapes inside matched containers
// Move heavy content outside the matched frameKorte controle
Wat is vereist om twee weergaven als bron en doel aan elkaar te koppelen in een heldenovergang?
Samenvatting van de les
Maak heldenovergangen met @Namespace en .matchedGeometryEffect(id:in:). Plaats statuswijzigingen binnen withAnimation. Zorg dat er altijd maar één gekoppelde weergave zichtbaar is om lay-outconflicten te voorkomen.
Leer Swift met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 122
- Lessen
- 409
Veelgestelde vragen
Is de les “matchedGeometryEffect voor hero-overgangen” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Swift Academy, waaronder “matchedGeometryEffect voor hero-overgangen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Swift Academy bevat in totaal 4 lessen.
Wat leer ik in “matchedGeometryEffect voor hero-overgangen”?
Naadloze hero-animaties tussen views maken met een namespace en overeenkomende ID's. Je oefent met Swift Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Swift Academy te beginnen?
Ervaring vooraf is niet nodig. Swift Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “matchedGeometryEffect voor hero-overgangen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Swift Academy?
Ja. Elke les over Swift Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Impliciete versus expliciete animaties
- matchedGeometryEffect voor hero-overgangen
- Aangepaste AnimatableModifier en Animatable
- TimelineView en Canvas voor performant tekenen