History
Loading...
Learn a little bit every day
Learn a little bit every day
Loading...
August 30, 2025
withAnimation(.easeInOut(duration: 0.5).delay(0.3)) to create sequential animations without nested completion handlers. Combine with AsyncAfter for complex animation choreography that maintains clean, readable code.This approach uses discrete animation blocks with timing delays to create smooth sequential animations. Each animation step is clearly defined with its own duration and easing curve, making the sequence predictable and maintainable.
@State private var animationStep = 0
@State private var scale: CGFloat = 1.0
@State private var rotation: Double = 0
@State private var opacity: Double = 1.0
var body: some View {
Rectangle()
.fill(.blue)
.frame(width: 100, height: 100)
.scaleEffect(scale)
.rotationEffect(.degrees(rotation))
.opacity(opacity)
.onTapGesture {
playAnimationSequence()
}
}
func playAnimationSequence() {
withAnimation(.easeOut(duration: 0.3)) {
scale = 1.2
}
DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
withAnimation(.easeInOut(duration: 0.4)) {
rotation = 180
}
}
DispatchQueue.main.asyncAfter(deadline: .now() + 0.7) {
withAnimation(.easeIn(duration: 0.3)) {
scale = 1.0
opacity = 0.5
}
}
}Sequential animations are easier to debug, modify, and understand compared to nested completion handlers. This pattern also allows for better control over individual animation properties and timing, resulting in more polished user interactions.