matchedGeometryEffect per transizioni hero
Creare animazioni hero fluide tra view con namespace e identificativi matched.
matchedGeometryEffect per transizioni hero è una lezione Swift Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Swift Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Swift Academy include 4 lezioni in totale.
Che cos'è matchedGeometryEffect?
matchedGeometryEffect anima la posizione e le dimensioni di una vista tra due stati, creando una transizione "hero".
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)
}
}
}Creazione di un namespace
Dichiari un @Namespace nella vista padre. Tutte le viste associate condividono questo namespace.
struct ParentView: View {
@Namespace private var heroNamespace
}Applicazione del modificatore
Applichi .matchedGeometryEffect(id:in:) con lo stesso id sia alla vista di origine sia a quella di destinazione.
Image("cover")
.matchedGeometryEffect(id: "albumArt", in: heroNamespace)Attivazione della transizione
Inserisca la modifica dello stato in withAnimation per animare la geometria tra le due viste.
Button("Expand") {
withAnimation(.spring()) {
isExpanded.toggle()
}
}Transizione hero da elenco a dettaglio
Un modello hero classico: tocchi un elemento dell'elenco e questo si espande in un dettaglio a schermo intero usando 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)
}Parametro isSource
Quando due viste condividono un id, contrassegni l'origine con isSource: true (impostazione predefinita) e la destinazione con isSource: false.
SmallImage()
.matchedGeometryEffect(id: "img", in: ns, isSource: true)
LargeImage()
.matchedGeometryEffect(id: "img", in: ns, isSource: false)Proprietà di ancoraggio e dimensione
Personalizzi il punto di ancoraggio e le proprietà geometriche (posizione/dimensione) da associare.
.matchedGeometryEffect(
id: "box",
in: ns,
anchor: .center,
properties: [.position, .size]
)Combinazione con AnyTransition
Combini l'animazione hero con .transition per controllare anche il modo in cui il contenuto appare con una dissolvenza o uno scorrimento.
DetailView()
.matchedGeometryEffect(id: "card", in: ns)
.transition(.opacity)Più transizioni hero in un elenco
Utilizzi ID univoci derivati dagli identificatori degli elementi per eseguire più animazioni hero indipendenti.
ForEach(products) { p in
ProductCard(p)
.matchedGeometryEffect(id: p.id, in: ns)
}Problemi comuni
Le due viste con lo stesso ID non devono essere visualizzate contemporaneamente: solo una deve essere visibile alla volta, altrimenti si verificheranno problemi di layout.
// 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 togglingSuggerimento sulle prestazioni
Mantenga leggere le viste associate. Gerarchie complesse all'interno delle viste associate possono causare la perdita di fotogrammi durante l'animazione.
// Prefer simple shapes inside matched containers
// Move heavy content outside the matched frameVerifica rapida
Che cosa è necessario per collegare due viste come origine e destinazione in una transizione hero?
Riepilogo della lezione
Crei transizioni hero con @Namespace e .matchedGeometryEffect(id:in:). Inserisca le modifiche dello stato in withAnimation. Si assicuri che sia visibile una sola vista associata alla volta, per evitare conflitti di layout.
Impara Swift con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 122
- Lezioni
- 409
Domande Frequenti
La lezione «matchedGeometryEffect per transizioni hero» è gratuita?
Sì — il testo completo di «matchedGeometryEffect per transizioni hero» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Swift Academy, passa a CoddyKit PRO. Il corso Swift Academy include 4 lezioni in totale.
Cosa imparerò in «matchedGeometryEffect per transizioni hero»?
Creare animazioni hero fluide tra view con namespace e identificativi matched. Eserciti Swift Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Swift Academy?
Non è richiesta alcuna esperienza precedente. Swift Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «matchedGeometryEffect per transizioni hero»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Swift Academy?
Sì. Ogni lezione Swift Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Animazioni implicite ed esplicite
- matchedGeometryEffect per transizioni hero
- AnimatableModifier e Animatable personalizzati
- TimelineView e Canvas per il disegno ad alte prestazioni