In today’s digital era, animations play a pivotal role in enhancing user experience. They not only make applications visually appealing but also guide users through the flow of an application. SwiftUI, Apple’s innovative UI toolkit, has made it incredibly straightforward for developers to craft beautiful animations with minimal code. In this blog post, we’ll delve into creating a captivating ring animation using SwiftUI.

What are we building?

We’re aiming to design a simple yet elegant ring animation. This animation will depict a ring filling up gradually, giving a visual treat to the users. The primary color we’ll be using for this demonstration is a delightful shade of strawberry.

Diving into the Code

import SwiftUI

struct RingAnimation: View {
    @State private var drawingStroke = false

    let strawberry = Color(#colorLiteral(red: 1, green: 0.1857388616, blue: 0.5733950138, alpha: 1))

    let animation = Animation
        .easeOut(duration: 30)
        .repeatForever(autoreverses: false)
        .delay(0.5)

    var body: some View {
        ZStack {
            ring(for: strawberry)
                .frame(width: 164)
        }
        .animation(animation, value: drawingStroke)
        .onAppear {
            drawingStroke.toggle()
        }
    }

    func ring(for color: Color) -> some View {
        Circle()
            .stroke(style: StrokeStyle(lineWidth: 16))
            .foregroundStyle(.tertiary)
            .overlay {
                Circle()
                    .trim(from: 0, to: drawingStroke ? 1 : 0)
                    .stroke(color.opacity(0.5),
                            style: StrokeStyle(lineWidth: 16, lineCap: .round))
            }
            .rotationEffect(.degrees(-90))
    }
}

Breaking Down the Code

1. State Variable: The @State property wrapper is used to create a mutable state for our view. In our case, drawingStroke determines whether the ring should be drawn or not.
2. Color Literal: The strawberry constant represents the primary color of our ring. SwiftUI’s Color struct allows us to define colors using color literals directly.
3. Animation Properties: The animation constant defines the behavior of our animation. We’re using an ease-out animation that lasts for 30 seconds, repeats indefinitely, and starts after a short delay of 0.5 seconds.
4. The Ring: The ring(for:) function is where the magic happens. We first draw a background circle and then overlay it with our animated ring. The trim modifier is used to animate the drawing of the ring.
5. Rotation: The .rotationEffect(.degrees(-90)) ensures that our animation starts from the top of the circle.

Conclusion

SwiftUI has truly revolutionized the way we think about UI development on Apple platforms. With just a few lines of code, we’ve managed to create a visually appealing ring animation. Whether you’re a seasoned developer or just starting out, SwiftUI offers a plethora of opportunities to enhance your app’s UI and UX. Dive in and explore its vast capabilities!