Mastering the Sunrise Animation in SwiftUI

In this article, we’ll explore the captivating world of SwiftUI animations by delving into the mesmerizing Sunrise animation. We’ll break down each component of the animation and provide code snippets to help you recreate this visually stunning effect.

Sunrise

Prerequisites

To follow along with this tutorial, you should have a basic understanding of SwiftUI and Swift programming. Familiarity with SwiftUI views, animations, and state management will be beneficial.

Getting Started

Let’s begin by examining the provided Swift code:

struct SunView: View {
  @State private var animate: Bool = false
  
  var body: some View {
    ZStack {
      Color.black.ignoresSafeArea()
      
      //Title
      Text("Sunrise - Sunset")
        .font(.largeTitle)
        .fontWeight(.heavy)
        .foregroundColor(.white)
        .offset(y: -300)
      
      // Start Time
      Text("5:43 AM")
        .fontWeight(.bold)
        .foregroundColor(.white)
        .offset(x: -150, y: 45)
      
      // End Time
      Text("08:43 PM")
        .fontWeight(.bold)
        .foregroundColor(.white)
        .offset(x: 150, y: 45)
      
      // Dash Line
      Circle()
        .trim(from: 1/2, to: 1)
        .stroke(style: StrokeStyle(lineWidth: 3, dash: [10,10]))
        .foregroundColor(.yellow)
        .frame(width: 300, height: 300)
      
      // Start Dot
      Circle()
        .frame(width: 10, height: 10)
        .foregroundColor(.yellow)
        .offset(x: -150, y: 10)
      
      // End Dot
      Circle()
        .frame(width: 10, height: 10)
        .foregroundColor(.yellow)
        .offset(x: 150, y: 10)
      
      // Sun Image
      Image(systemName: "sun.max.fill")
        .font(.title)
        .foregroundColor(.yellow)
        .offset(x: -150)
        .rotationEffect(.degrees(animate ? 180 : 0))
        .onAppear() {
          withAnimation(.easeInOut(duration: 5).delay(2).repeatForever(autoreverses: true)) {
            animate.toggle()
          }
        }
      
      // Status
      Text(animate ? "Good Evening" : "Good Morning")
        .font(.headline)
        .fontWeight(.bold)
        .foregroundColor(.white)
    }
  }
}

The SunView is a SwiftUI view responsible for displaying the Sunrise animation. It utilizes a ZStack to overlay various components and provide the desired visual effect.

Components of the Animation

Let’s break down each component of the Sunrise animation and understand how they work together.

1. Title

The animation begins with a title, “Sunrise — Sunset,” displayed at the top of the screen.

Text("Sunrise - Sunset")
  .font(.largeTitle)
  .fontWeight(.heavy)
  .foregroundColor(.white)
  .offset(y: -300)

The Text view sets the font size, weight, and color of the title, while the offset modifier positions it at a specific vertical distance from the center.

2. Start Time and End Time

The start and end times are displayed as text, representing the sunrise and sunset times.

Text("5:43 AM")
  .fontWeight(.bold)
  .foregroundColor(.white)
  .offset(x: -150, y: 45)

Text("08:43 PM")
  .fontWeight(.bold)
  .foregroundColor(.white)
  .offset(x: 150, y: 45)

The Text views set the font weight and color for the time labels, while the offset modifier positions them at specific horizontal and vertical distances from the center.

3. Dash Line

The dash line represents the duration between the sunrise and sunset times.

Circle()
  .trim(from: 1/2, to: 1)
  .stroke(style: StrokeStyle(lineWidth: 3, dash: [10,10]))
  .foregroundColor(.yellow)
  .frame(width: 300, height: 300)

The Circle view, combined with the trim modifier, creates a partial circle with a dashed stroke. The stroke modifier defines the line width and dash pattern, while the foregroundColor sets the color of the dash line.

4. Start Dot and End Dot

The start and end dots represent the sunrise and sunset positions on the dash line.

Circle()
  .frame(width: 10, height: 10)
  .foregroundColor(.yellow)
  .offset(x: -150, y: 10)

Circle()
  .frame(width: 10, height: 10)
  .foregroundColor(.yellow)
  .offset(x: 150, y: 10)

The Circle views set the dimensions and color for the dots, while the offset modifier positions them at specific horizontal and vertical distances from the center.

5. Sun Image

The sun image rotates back and forth, simulating the sunrise and sunset.

Image(systemName: "sun.max.fill")
  .font(.title)
  .foregroundColor(.yellow)
  .offset(x: -150)
  .rotationEffect(.degrees(animate ? 180 : 0))
  .onAppear() {
    withAnimation(.easeInOut(duration: 5).delay(2).repeatForever(autoreverses: true)) {
      animate.toggle()
    }
  }

The Image view displays the sun icon, while the rotationEffect modifier animates the rotation of the image based on the animate state variable. The animation is triggered using the .onAppear modifier with the specified duration, delay, repetition, and autoreversal.

6. Status

The status label changes based on the animation, displaying “Good Morning” or “Good Evening” accordingly.

Text(animate ? "Good Evening" : "Good Morning")
  .font(.headline)
  .fontWeight(.bold)
  .foregroundColor(.white)

The Text view sets the font style, weight, color, and content based on the animate state variable.

Conclusion

In this article, we explored the captivating Sunrise animation using SwiftUI. By breaking down each component and its associated modifiers, you now have the knowledge to create visually stunning animations. SwiftUI provides a powerful framework for creating engaging user interfaces, and the Sunrise animation is just one example of its capabilities.

Feel free to experiment with the provided code and customize it to suit your needs. Let your creativity shine as you incorporate captivating animations into your SwiftUI projects.

Happy animating! 🌞

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.