In this iOS Swift article, we will learn the captivating world of Swiftui animations by delving into the mesmerizing Sunrise and sunset animation. We will break down each component of the animation and provide full source code to help you recreate this visually stunning effect.
Also in the iOS Tutorial i includes weather list UI for last 7 days. Show a SwiftUI list with card view. In the list item i add Days Weather , icons and min and max weather.
So Let’s Start to create a new interesting example with swiftUI. Start your Xcode and create a new swiftUI file and follow bellow steps.
Sunrise And Sunset View in SwiftUI
Table of Contents
First lets create sunrise and sunset Ui with animation in swiftUi. To Achieve the UI i use Zstack and then Vstack, Progress animation with cercel
ZStack { LinearGradient(gradient: Gradient(colors: [Color.black, .white]), startPoint: .topLeading, endPoint: .bottomTrailing) .ignoresSafeArea(.all) VStack{ Text("Sunrise - Sunset") .font(.largeTitle) .fontWeight(.heavy) .foregroundColor(.white) ZStack{ 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) 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 ? 360 : 0)) .onAppear() { withAnimation(.easeInOut(duration: 10).delay(2).repeatForever(autoreverses: false)) { animate.toggle() } }
// Status Text(animate ? "Good Evening" : "Good Morning") .font(.headline) .fontWeight(.bold) .foregroundColor(.white) }
Create a iOS WeatherApp UI in SwiftUi
Let’s create a list and show the last 7 days date in weatherList. So follow below code snip. For these i am using a list and make a custom CardView.
List((0..<7)){ idx in WeatherItemCard(image: "", Day: "Today", wather: "Cloudy", max: 34.01,min: 10.4) }.padding(.horizontal, -30) .padding(.vertical, -70) .navigationTitle("Example 1") .navigationBarTitleDisplayMode(.inline) .frame(maxWidth: .infinity) }
Weather CardView Source Code
import SwiftUI struct WeatherItemCard: View { var image: String var Day: String var wather: String var max: Double var min: Double var body: some View { HStack(alignment: .center) { Spacer() VStack{ Text(Day) .font(.system(size: 15, weight: .bold, design: .default)) .foregroundColor(.black) Text(wather) .font(.system(size: 12, weight: .regular, design: .default)) .foregroundColor(.black) } Spacer() Image(systemName: "sun.dust.fill") .resizable() .aspectRatio(contentMode: .fit) .frame(width: 50) .padding(.all, 10) Spacer() VStack{ Text("Max") .font(.system(size: 15, weight: .regular, design: .default)) .foregroundColor(.black) Text(String.init(max)) .font(.system(size: 18, weight: .bold, design: .default)) .foregroundColor(.black) } Spacer() VStack{ Text("Min") .font(.system(size: 15, weight: .regular, design: .default)) .foregroundColor(.black) Text(String.init(min)) .font(.system(size: 18, weight: .bold, design: .default)) .foregroundColor(.black) } Spacer() } .frame(maxWidth: .infinity, alignment: .center) .background(Color.white) .modifier(CardModifier()) } }
Weather iOS APP UI with Sunrise And Sunset View in SwiftUI
Now lets make combine all the code and design a full screen with both sunrise and sunset with weather list.
import Foundation import SwiftUI struct WeatherForecastView: View { @State private var animate: Bool = false @State private var progress: Double = 0.5 var body: some View{ ZStack { LinearGradient(gradient: Gradient(colors: [Color.black, .white]), startPoint: .topLeading, endPoint: .bottomTrailing) .ignoresSafeArea(.all) VStack{ //Title Text("Sunrise - Sunset") .font(.largeTitle) .fontWeight(.heavy) .foregroundColor(.white) ZStack{ // 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 ? 360 : 0)) .onAppear() { withAnimation(.easeInOut(duration: 10).delay(2).repeatForever(autoreverses: false)) { animate.toggle() } } // Status Text(animate ? "Good Evening" : "Good Morning") .font(.headline) .fontWeight(.bold) .foregroundColor(.white) } List((0..<7)){ idx in WeatherItemCard(image: "", Day: "Today", wather: "Cloudy", max: 34.01,min: 10.4) }.padding(.horizontal, -30) .padding(.vertical, -70) .navigationTitle("Example 1") .navigationBarTitleDisplayMode(.inline) .frame(width: .infinity) } } } } struct Weather_Previews: PreviewProvider { static var previews: some View { WeatherForecastView() } }
Read More Tutorial
add a comment