matchedGeometryEffect in iOS Swift - UI Render Trace

Component - matchedGeometryEffect

The matchedGeometryEffect modifier in SwiftUI links two views by a shared animation ID. When one view changes position or size to the other, SwiftUI animates the transition smoothly, making the UI feel connected and natural.

Widget Tree

ZStack
├── RoundedRectangle (small)
└── RoundedRectangle (large)

A ZStack places two rounded rectangles on top of each other. Each rectangle has a matchedGeometryEffect with the same ID, so SwiftUI animates the shape moving and resizing between the two states.

Render Trace - 4 Steps

Step 1: ZStack

Step 2: RoundedRectangle (small)

Step 3: RoundedRectangle (large)

Step 4: Animation Trigger

State Change - Re-render

Trigger:User taps the shape to toggle size

Before

Shape is small (100x100) and blue

→

After

Shape is large (300x300) and red

Re-renders:The entire ZStack re-renders, but matchedGeometryEffect animates only the shape's frame and position changes

UI Quiz - 3 Questions

What does matchedGeometryEffect do in this UI?

A It animates the shape smoothly between two sizes and positions

B It changes the color of the shape instantly

C It hides the shape when tapped

D It duplicates the shape on screen

Key Insight

matchedGeometryEffect helps create smooth, natural animations by linking two views with the same ID. This makes transitions between different UI states feel connected and visually pleasing without complex manual animations.