SwiftUI Animations: A Visual Guide
Animations can make your app feel alive. Here’s how to implement smooth animations in SwiftUI with practical examples.
Basic Animation
The simplest way to add animation in SwiftUI:
Button("Tap Me") {
isPressed.toggle()
}
.font(.title)
.scaleEffect(isPressed ? 0.8 : 1.0)
.animation(.easeInOut, value: isPressed)
Spring Animations
For more natural movement, use spring animations:
Circle()
.fill(Color.blue)
.frame(width: size, height: size)
.offset(y: offset)
.animation(
.spring(
response: 0.5,
dampingFraction: 0.6,
blendDuration: 0
),
value: offset
)
Matching Geometry
One of SwiftUI’s most powerful features is matchedGeometryEffect:
@Namespace private var animation
VStack {
if !isExpanded {
Circle()
.fill(Color.orange)
.frame(width: 50, height: 50)
.matchedGeometryEffect(id: "shape", in: animation)
}
}
if isExpanded {
RoundedRectangle(cornerRadius: 20)
.fill(Color.orange)
.frame(width: 200, height: 200)
.matchedGeometryEffect(id: "shape", in: animation)
}
Try experimenting with different animation curves to see what feels right for your app.