matchedGeometryEffect for Hero Transitions
Creating seamless hero animations between views with namespace and matched IDs.
What is matchedGeometryEffect?
matchedGeometryEffect animates a view's position and size between two states, creating a "hero" transition.
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)
}
}
}Creating a Namespace
Declare a @Namespace in the parent view. All matched views share this namespace.
struct ParentView: View {
@Namespace private var heroNamespace
}All lessons in this course
- Implicit vs Explicit Animations
- matchedGeometryEffect for Hero Transitions
- Custom AnimatableModifier and Animatable
- TimelineView and Canvas for High-Performance Drawing