Creating Custom Animations with SwiftUI

SwiftUI makes it incredibly easy to add animations to your app, enhancing user experience with smooth and engaging transitions. In this post, we’ll explore how to create custom animations using SwiftUI, from basic animations to more complex interactions.

Why Animations Matter

Animations help improve user engagement by providing visual feedback, guiding user interactions, and making an app feel more polished and dynamic. Well-designed animations can differentiate a great app from a good one.

Basic Animations in SwiftUI

SwiftUI provides built-in animation capabilities using the .animation() modifier and implicit animations. Here’s a simple example:

import SwiftUI

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

    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.blue)
                .frame(width: isExpanded ? 200 : 100, height: 100)
                .animation(.easeInOut(duration: 0.5), value: isExpanded)

            Button("Animate") {
                isExpanded.toggle()
            }
        }
    }
}

In this example, the rectangle smoothly expands when the button is tapped, thanks to SwiftUI’s built-in animation system.

Custom Animations with AnimatableModifier

For more complex animations, you can use AnimatableModifier. This allows you to animate custom properties.

Swift

struct AnimatingRectangle: View {
    @State private var scale: CGFloat = 1.0

    var body: some View {
        Rectangle()
            .fill(Color.green)
            .frame(width: 100, height: 100)
            .scaleEffect(scale)
            .animation(.spring(response: 0.5, dampingFraction: 0.6), value: scale)
            .onTapGesture {
                scale = scale == 1.0 ? 1.5 : 1.0
            }
    }
}

Using MatchedGeometryEffect for Seamless Transitions

matchedGeometryEffect allows smooth transitions between different views:

Swift

struct MatchedGeometryExample: View {
    @Namespace private var animation
    @State private var isExpanded = false

    var body: some View {
        VStack {
            if isExpanded {
                Circle()
                    .fill(Color.red)
                    .frame(width: 100, height: 100)
                    .matchedGeometryEffect(id: "shape", in: animation)
            } else {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.red)
                    .frame(width: 100, height: 100)
                    .matchedGeometryEffect(id: "shape", in: animation)
            }

            Button("Animate") {
                withAnimation(.easeInOut) {
                    isExpanded.toggle()
                }
            }
        }
    }
}

SwiftUI makes animation straightforward and powerful. Whether using basic animations, AnimatableModifier, or matchedGeometryEffect, you can create stunning UI experiences with minimal effort. Experiment with different easing functions and timing to fine-tune animations for the best user experience.

Do you have any favorite SwiftUI animation tricks? Share them in the comments below!