Creating a Circle Loader Animation in SwiftUI

Animations play a crucial role in enhancing the user experience of an application. They add a touch of interactivity and visual appeal to the user interface. In this article, we will explore how to create a Circle Loader animation in SwiftUI. We’ll go through the provided code step by step, explaining each component and demonstrating its usage with examples.

Circle Loader

Introduction to Circle Loader Animation

A Circle Loader animation is a popular choice for indicating that a task is in progress or to engage the user while content is being loaded. It typically consists of a circle that continuously rotates while showing a partial fill or stroke animation. SwiftUI, Apple’s declarative UI framework, provides powerful tools for creating elegant animations with ease.

Understanding the Code

Let’s start by examining the code provided:

import SwiftUI

struct CircleLoaderView: View {
  @State private var isRotating: Bool = false
  @State private var animateStrokeStart: Bool = false
  @State private var animateStrokeEnd: Bool = false
  var model: CircleLoaderModel
  
  var body: some View {
    ZStack {
      Circle()
        .trim(from: animateStrokeStart ? 1/3 : 1/9, to: animateStrokeEnd ? 2/5 : 1)
        .stroke(lineWidth: model.strokeWidth)
        .frame(width: model.width, height: model.height)
        .foregroundColor(model.color)
        .rotationEffect(.degrees(isRotating ? 360 : 0))
        .onAppear() {
          withAnimation(.easeInOut(duration: 1).repeatForever(autoreverses: false)) {
            isRotating.toggle()
          }
          
          withAnimation(.easeInOut(duration: 1).delay(0.5).repeatForever(autoreverses: true)) {
            animateStrokeStart.toggle()
          }
          
          withAnimation(.easeInOut(duration: 1).delay(1).repeatForever(autoreverses: true)) {
            animateStrokeEnd.toggle()
          }
        }
    }
  }
}

struct CircleLoaderModel {
  let color: Color
  let width: CGFloat
  let height: CGFloat
  let strokeWidth: CGFloat
}

CircleLoaderView

The CircleLoaderView struct represents the view that displays the Circle Loader animation. It conforms to the View protocol, which is a fundamental component in SwiftUI for building user interfaces.

Properties

• isRotating is a boolean @State property that controls the rotation animation of the circle.
• animateStrokeStart and animateStrokeEnd are boolean @State properties that control the stroke animation of the circle.
• model is an instance of the CircleLoaderModel struct, which holds properties for configuring the appearance of the circle loader.

View Hierarchy

The body property of CircleLoaderView defines the view hierarchy for the Circle Loader animation. It consists of a ZStack containing a Circle view.

• The Circle view is configured using the provided model properties, such as color, width, height, and stroke width.
• The .trim modifier is used to define the starting and ending points of the stroke animation based on the values of animateStrokeStart and animateStrokeEnd.
• The .stroke modifier sets the stroke properties of the circle, such as line width.
• The .frame modifier specifies the dimensions of the circle.
• The .foregroundColor modifier sets the color of the circle.
• The .rotationEffect modifier applies a rotation animation to the circle based on the value of isRotating.
• The .onAppear modifier is called when the view appears on the screen and triggers the animation sequences.

CircleLoaderModel

The CircleLoaderModel struct defines the configuration options for the Circle Loader animation. It includes the following properties:

• color represents the color of the circle.
• width and height specify the dimensions of the circle.
• strokeWidth determines the width of the stroke applied to the circle.

Usage and Customization

To use the Circle Loader animation in your SwiftUI project, follow these steps:

1. Create an instance of CircleLoaderModel to customize the appearance of the loader. Set the desired color, width, height, and stroke width values.
2. Instantiate the CircleLoaderView, passing the CircleLoaderModel instance as a parameter.

Here’s an example of how you can use the Circle Loader animation:

import SwiftUI

struct ContentView: View {
  var body: some View {
    CircleLoaderView(model: CircleLoaderModel(color: .blue, width: 100, height: 100, strokeWidth: 10))
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

In this example, we create a ContentView that displays the Circle Loader animation with a blue color, width and height of 100, and a stroke width of 10.

Feel free to customize the Circle Loader animation by adjusting the CircleLoaderModel properties according to your project's requirements. You can modify the color, size, stroke width, and even add additional modifiers to further enhance the animation.

Conclusion

In this article, we explored how to create a Circle Loader animation in SwiftUI. We dissected the provided code, explaining each component and its purpose. By leveraging SwiftUI’s animation capabilities and declarative syntax, we can easily create dynamic and visually engaging user interfaces. Now you have the knowledge to integrate a Circle Loader animation into your SwiftUI project and customize it to suit your needs. Happy coding!

We invite you to continue your journey of iOS discovery by following the Connect.iOS Instagram account, where you’ll find a treasure trove of amazing iOS content. Stay updated with the latest trends, tips, and tricks that will enhance your iOS development skills. Join the vibrant community and immerse yourself in the enchanting world of iOS.

Follow Connect.iOS on Instagram: Connect.iOS Instagram

Embark on your own odyssey of iOS development, experimenting with the various SwiftUI properties and values to create unique and mesmerizing animations. Unleash your creativity and let your imagination soar as you craft immersive user experiences that captivate and inspire. The possibilities are endless, and the journey is yours to embrace. Happy coding!

Note: Be sure to visit the Connect.iOS Instagram account at https://www.instagram.com/connect.ios/ for more amazing iOS content.