SwiftUI Animations: A Complete Guide

Animations can make an app feel more dynamic, engaging, and user-friendly. SwiftUI makes adding animations simple and powerful with just a few lines of code. In this guide, we'll explore different types of animations in SwiftUI and how to use them effectively.

1. Why Use Animations?

Animations improve the user experience by: ✔ Providing visual feedback (e.g., button tap effects) ✔ Enhancing transitions (e.g., screen changes) ✔ Making UI elements more interactive

With SwiftUI, you can create smooth animations without complex code.

2. Basic Animation with .animation()

You can animate any change in a view's state using .animation().

Example: Animating a Button Tap

import SwiftUI

struct SimpleAnimationView: View {
    @State private var isExpanded = false

    var body: some View {
        VStack {
            Button("Tap Me") {
                isExpanded.toggle()
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
 Rectangle()
                .frame(width: isExpanded ? 200 : 100, height: 100)
                .foregroundColor(.green)
                .animation(.default, value: isExpanded)
        }
    }
}

Here, tapping the button changes the rectangle’s width with a smooth animation.

3. Implicit Animations

SwiftUI automatically animates changes when you use .animation() with a state change.

Example: Changing Opacity

Text("Hello, SwiftUI!")
    .opacity(isVisible ? 1 : 0)
    .animation(.easeInOut(duration: 1), value: isVisible)

Here, the text smoothly fades in and out when isVisible changes.

4. Explicit Animations

Use .withAnimation to control when an animation happens.

Example: Animating Scale with Explicit Animation

Button("Tap Me") {
    withAnimation(.spring()) {
        isScaled.toggle()
    }
}
.scaleEffect(isScaled ? 1.5 : 1)

This ensures the scale animation happens only when withAnimation is called.

5. Spring Animation

Spring animations make UI elements move naturally, like bouncing effects.

Circle()
    .frame(width: 100, height: 100)
    .offset(y: isMoved ? 300 : 0)
    .animation(.spring(response: 0.5, dampingFraction: 0.5), value: isMoved)

The response and dampingFraction parameters control the bounce effect.

6. Animating Shapes and Colors

You can animate colors and shapes for a smooth transition effect.

Example: Changing Colors with Animation

Rectangle()
    .fill(isRed ? Color.red : Color.blue)
    .frame(width: 100, height: 100)
    .animation(.easeInOut, value: isRed)

Toggling isRed smoothly changes the rectangle’s color.

7. Transition Animations

Use .transition() to animate how views appear and disappear.

Example: Slide In/Out Effect

if isVisible {
    Text("Hello, SwiftUI!")
        .transition(.slide)
}

Use .opacity, .scale, or .move for different effects.

8. Animating with matchedGeometryEffect

When moving elements between views, matchedGeometryEffect creates a smooth transition.

Example: Animating a Moving Shape

@Namespace private var animationNamespace

if isExpanded {
    Circle()
        .matchedGeometryEffect(id: "shape", in: animationNamespace)
} else {
    Rectangle()
        .matchedGeometryEffect(id: "shape", in: animationNamespace)
}

This smoothly morphs the shape between a circle and a rectangle.

Conclusion

SwiftUI makes animations easy and powerful. Whether you’re animating a button tap, a color change, or a complex transition, you can achieve smooth effects with minimal code.

Try experimenting with different animation types to bring your UI to life!