Splash Screen Using LinearGradient and Mask

Опубликовано: 27 Декабрь 2024
на канале: Cosmos Chaos Coding
15
1

🎨 Create a Stunning Splash Screen with SwiftUI! 🌟
In this tutorial, we'll walk through a beautiful splash screen animation using SwiftUI. Our code showcases a vibrant gradient effect that brings a simple letter "C" to life!

✨ What You'll Learn:
Creating eye-catching gradient backgrounds with LinearGradient
Utilizing hueRotation for dynamic color changes

👨‍💻 Code Breakdown:

Color and Gradients: Explore how to set a black background and apply a colorful gradient to our text.
Animation: Discover the power of SwiftUI's animation capabilities as we make the gradient shift colors endlessly.

🛠️ Prerequisites:
Basic knowledge of SwiftUI
Xcode installed to run the code

🔥 Let’s make your app stand out! Don’t forget to like, subscribe, and hit the notification bell for more awesome SwiftUI tutorials!

Code : -

struct ContentView: View {
@State var startAnimation : Bool = false
var body: some View {
ZStack {
Color.black
.ignoresSafeArea()

VStack {
Text("C")
.font(.system(size: 250))
.fontWeight(.black)
.foregroundColor(.clear)
.background(
LinearGradient(
gradient: Gradient(colors: [.red, .yellow, .green]),
startPoint: .topLeading,
endPoint: .bottomTrailing
)
.hueRotation(.degrees(startAnimation ? 35 : 0))
.onAppear(){
withAnimation(.easeInOut(duration: 0.5).repeatForever()){
startAnimation.toggle()
}
}
)
.mask(Text("C")
.font(.system(size: 250))
.fontWeight(.black)
)
}
}

}
}

#Preview {
ContentView()
}