matchedGeometryEffect pour les transitions héroïques
Créer des animations héroïques fluides entre les vues avec un espace de noms et des identifiants correspondants.
matchedGeometryEffect pour les transitions héroïques est une leçon Swift Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Swift Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Swift Academy comprend 4 leçons au total.
Qu’est-ce que matchedGeometryEffect ?
matchedGeometryEffect anime la position et la taille d’une vue entre deux états, créant une transition de type héroïque.
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)
}
}
}Créer un espace de noms
Déclarez un @Namespace dans la vue parente. Toutes les vues correspondantes partagent cet espace de noms.
struct ParentView: View {
@Namespace private var heroNamespace
}Appliquer le modificateur
Appliquez .matchedGeometryEffect(id:in:) avec le même id aux vues source et destination.
Image("cover")
.matchedGeometryEffect(id: "albumArt", in: heroNamespace)Déclencher la transition
Encapsulez le changement d’état dans withAnimation pour animer la géométrie entre les deux vues.
Button("Expand") {
withAnimation(.spring()) {
isExpanded.toggle()
}
}De la liste au détail avec effet héroïque
Un modèle héroïque classique : touchez un élément de la liste pour qu’il s’agrandisse et affiche un détail en plein écran à l’aide de 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)
}Paramètre isSource
Lorsque deux vues partagent un identifiant, marquez l’origine avec isSource: true (valeur par défaut) et la destination avec isSource: false.
SmallImage()
.matchedGeometryEffect(id: "img", in: ns, isSource: true)
LargeImage()
.matchedGeometryEffect(id: "img", in: ns, isSource: false)Propriétés d’ancrage et de taille
Personnalisez le point d’ancrage et les propriétés géométriques (position/taille) qui doivent correspondre.
.matchedGeometryEffect(
id: "box",
in: ns,
anchor: .center,
properties: [.position, .size]
)Combiner avec AnyTransition
Combinez l’animation héroïque avec .transition pour contrôler également la manière dont le contenu apparaît ou glisse à l’écran.
DetailView()
.matchedGeometryEffect(id: "card", in: ns)
.transition(.opacity)Plusieurs effets héroïques dans une liste
Utilisez des identifiants uniques dérivés des identifiants des éléments pour exécuter plusieurs animations héroïques indépendantes.
ForEach(products) { p in
ProductCard(p)
.matchedGeometryEffect(id: p.id, in: ns)
}Pièges courants
Les deux vues ayant le même identifiant ne doivent pas apparaître simultanément : une seule doit être visible à la fois, sinon vous observerez des problèmes de mise en page.
// 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 togglingConseil de performance
Gardez les vues correspondantes légères. Des hiérarchies complexes à l’intérieur de ces vues peuvent provoquer des pertes d’images pendant l’animation.
// Prefer simple shapes inside matched containers
// Move heavy content outside the matched frameVérification rapide
Que faut-il pour relier deux vues en tant que source et destination dans une transition héroïque ?
Récapitulatif de la leçon
Créez des transitions héroïques avec @Namespace et .matchedGeometryEffect(id:in:). Encapsulez les changements d’état dans withAnimation. Vérifiez qu’une seule vue correspondante est visible à la fois afin d’éviter les conflits de mise en page.
Questions Fréquemment Posées
La leçon « matchedGeometryEffect pour les transitions héroïques » est-elle gratuite ?
Oui — le texte complet de « matchedGeometryEffect pour les transitions héroïques » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Swift Academy, passe à CoddyKit PRO. Le cours Swift Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « matchedGeometryEffect pour les transitions héroïques » ?
Créer des animations héroïques fluides entre les vues avec un espace de noms et des identifiants correspondants. Tu pratiques Swift Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Swift Academy ?
Aucune expérience préalable n'est requise. Swift Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « matchedGeometryEffect pour les transitions héroïques » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Swift Academy ?
Oui. Chaque leçon Swift Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Animations implicites et explicites
- matchedGeometryEffect pour les transitions héroïques
- AnimatableModifier et Animatable personnalisés
- TimelineView et Canvas pour un dessin haute performance