matchedGeometryEffect para transiciones hero
Cree animaciones hero fluidas entre vistas mediante un namespace e identificadores matched.
matchedGeometryEffect para transiciones hero es una lección gratuita de Swift Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Swift Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Swift Academy incluye 4 lecciones en total.
¿Qué es matchedGeometryEffect?
matchedGeometryEffect anima la posición y el tamaño de una vista entre dos estados, creando una transición «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)
}
}
}Creación de un espacio de nombres
Declare un @Namespace en la vista principal. Todas las vistas emparejadas comparten este espacio de nombres.
struct ParentView: View {
@Namespace private var heroNamespace
}Aplicación del modificador
Aplique .matchedGeometryEffect(id:in:) con el mismo id a las vistas de origen y destino.
Image("cover")
.matchedGeometryEffect(id: "albumArt", in: heroNamespace)Activación de la transición
Incluya el cambio de estado en withAnimation para animar la geometría entre las dos vistas.
Button("Expand") {
withAnimation(.spring()) {
isExpanded.toggle()
}
}De lista a detalle con transición hero
Un patrón hero clásico: toque un elemento de una lista y este se expandirá hasta convertirse en un detalle a pantalla completa mediante 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)
}Parámetro isSource
Cuando dos vistas comparten un id, marque el origen con isSource: true (valor predeterminado) y el destino con isSource: false.
SmallImage()
.matchedGeometryEffect(id: "img", in: ns, isSource: true)
LargeImage()
.matchedGeometryEffect(id: "img", in: ns, isSource: false)Propiedades de anclaje y tamaño
Personalice el punto de anclaje y las propiedades geométricas (posición/tamaño) que se emparejan.
.matchedGeometryEffect(
id: "box",
in: ns,
anchor: .center,
properties: [.position, .size]
)Combinación con AnyTransition
Combine la animación hero con .transition para controlar también cómo el contenido aparece gradualmente o se desliza.
DetailView()
.matchedGeometryEffect(id: "card", in: ns)
.transition(.opacity)Varias transiciones hero en una lista
Use identificadores únicos derivados de los identificadores de los elementos para ejecutar varias animaciones hero independientes.
ForEach(products) { p in
ProductCard(p)
.matchedGeometryEffect(id: p.id, in: ns)
}Errores comunes
Las dos vistas con el mismo ID no deben aparecer simultáneamente: solo una debe estar visible en cada momento; de lo contrario, verá problemas de diseño.
// 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 togglingConsejo de rendimiento
Mantenga ligeras las vistas emparejadas. Las jerarquías complejas dentro de estas vistas pueden provocar pérdida de fotogramas durante la animación.
// Prefer simple shapes inside matched containers
// Move heavy content outside the matched frameComprobación rápida
¿Qué se necesita para vincular dos vistas como origen y destino en una transición hero?
Resumen de la lección
Cree transiciones hero con @Namespace y .matchedGeometryEffect(id:in:). Incluya los cambios de estado en withAnimation. Asegúrese de que solo haya una vista emparejada visible a la vez para evitar conflictos de diseño.
Preguntas frecuentes
¿La lección «matchedGeometryEffect para transiciones hero» es gratis?
Sí — el texto completo de «matchedGeometryEffect para transiciones hero» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Swift Academy, actualiza a CoddyKit PRO. El curso de Swift Academy incluye 4 lecciones en total.
¿Qué aprenderé en «matchedGeometryEffect para transiciones hero»?
Cree animaciones hero fluidas entre vistas mediante un namespace e identificadores matched. Practicas Swift Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Swift Academy?
No se requiere experiencia previa. Swift Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «matchedGeometryEffect para transiciones hero»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Swift Academy?
Sí. Cada lección de Swift Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Animaciones implícitas frente a explícitas
- matchedGeometryEffect para transiciones hero
- AnimatableModifier y Animatable personalizados
- TimelineView y Canvas para dibujo de alto rendimiento