Background Colour Driving me CRAZY

App Development
1

Hello,
I wonder if you can help me…
Im trying to have a gradient background on my app, with an animation on top. I want the gradient to go from the top left corner to the bottom right. So far its proving to be very difficult! please see the code below. I apologise in advance if I have made any glaring errors but I’m very new to this.

struct LaunchScreenView: View {
        
        @State var isAnimating = false
        @State var image = "Link logo"
    
    var body: some View {
        
        ZStack {
            
          LinearGradient(gradient: .init(colors: [UIColor.cyan.cgColor, UIColor.magenta.cgColor]), startPoint = CGPoint(x: 1.0, y: 1.0), endPoint = CGPoint(x: 0.0, y: 0.0)
            
            VStack {
                Image("\(image)")
                    .renderingMode(.template)
                    .resizable()
                    .frame(width: 150, height: 150)
                    .rotationEffect(Angle(degrees: isAnimating ? 1080 : 0))
                    .animation(
                        Animation
                            .easeInOut(duration: 0.7)
                            .delay(isAnimating ? 0.5 : 0)
                            .repeatForever(autoreverses: false)
                )
                    .scaleEffect(isAnimating ? 1 : 0)
                        .animation(
                            Animation
                                .easeInOut(duration: 0.7)
                                .delay(isAnimating ? 0.5 : 0)
                                .repeatForever(autoreverses: true)
                )
            }.frame(width: 213, height: 213)
            .onAppear(){
                Timer.scheduledTimer(withTimeInterval: 2.4, repeats: true) {_ in self.image = ""
                }
                self.isAnimating = true
            }.foregroundColor(Color.black).opacity(1)
        }.edgesIgnoringSafeArea(.all)
    }
}


struct LaunchScreenView_Previews: PreviewProvider {
    static var previews: some View {
        LaunchScreenView()
    }
}
2

Hi Spike,

Welcome to the Code Crew community

When specifying colors in a Gradient you can’t use UIColors. What you would have to do if you wanted to use a specific UIColor is to specify the RGB values that relate to those colors and use:

Color(red: Double, green: Double, blue: Double)

When specifying the start and end points they are a UnitPoint which is a value from 0, 0 (top Left) to 1,1 (bottom right) which you would specify as:

startPoint: UnitPoint(x: 0, y: 0), endPoint: UnitPoint(x: 1, y: 1)

So a gradient from blue to red starting at the top left and ending at the bottom right (using the standard SwifUI colors) and going up under the notch and right to the bottom past the safe area would be:

LinearGradient(gradient: Gradient(colors: [.blue, .red]), startPoint: UnitPoint(x: 0, y: 0), endPoint: UnitPoint(x: 1, y: 1))
    .edgesIgnoringSafeArea(.all)

Screen Shot 2020-08-03 at 8.54.44 pm
Screen Shot 2020-08-03 at 8.54.44 pm1080×2102 91.8 KB

Using cyan and magenta equivalent RGB values you would have:

LinearGradient(gradient: Gradient(colors: [Color(red: 0, green: 1.0, blue: 1.0), Color(red: 1.0, green: 0, blue: 1.0)]), startPoint: UnitPoint(x: 0, y: 0), endPoint: UnitPoint(x: 1, y: 1))
    .edgesIgnoringSafeArea(.all)

Screen Shot 2020-08-03 at 9.01.51 pm
Screen Shot 2020-08-03 at 9.01.51 pm1080×2102 97.2 KB

3

More information on the RGB equivalent color values here:
https://developer.apple.com/documentation/uikit/uicolor/standard_colors

4

Thank you very much for the help! Its really appreciated!

1 Like