Gradient Animation in SwiftUI

In this SwiftUI tutorial, we’ll learn how to make a gradient animation background in SwiftUI.

SwiftUI provides us LinearGradient which helps us create a gradient background quite easily. We’ll use LinearGradient along with the animation method of SwiftUI to create a gradient animation background.

What this blog will cover:

• LinearGradient
• hueRotation
• withAnimation

Let’s see how we use linear-gradient, hueRotation, and withAnimation modifiers for creating animated gradient backgrounds.

struct ContentView:View{
    
    var body: some View {
        
        VStack{
            Image(systemName: "swift")
                .font(.system(size: 130, weight: .light))
                .padding(.top, 80)
                .padding(.bottom, 64)
            
        }
      }
    }

So in our main view, ContentView of the app, we have taken a Vstack that holds our other UI elements.

inside the Stack view, we have just inserted a simple ImageView with a Swift Logo Image.

Now let’s create a state property named animateGradient which will change the state of our view.

@State var animateGradient: Bool = false

struct ContentView:View{
    
    @State var animateGradient: Bool = false
   
    var body: some View {
        VStack{
            Image(systemName: "swift")
                .font(.system(size: 130, weight: .light))
                .padding(.top, 80)
                .padding(.bottom, 64)
                .foregroundColor(.white.opacity(0.8))
               
          }
       }
    }

Now let’s just provide the VStack a gradient background using the LinearGradient of SwiftUI.

LinearGradient(
               colors: [.black, .teal],
               startPoint: .topLeading,
               endPoint: .bottomTrailing)

LinearGradient color parameter accepts an array of colors, so you can provide as many colors as you’d like to.

And there are various other options that we can choose for the startPoint and endPoint parameters of LinearGradient.

struct ContentView:View{
    
    @State var animateGradient: Bool = false
    var body: some View {
        
        VStack{
            Image(systemName: "swift")
                .font(.system(size: 130, weight: .light))
                .padding(.top, 80)
                .padding(.bottom, 64)
                .foregroundColor(.white.opacity(0.8))
               
        }
        .frame(maxWidth: .infinity,maxHeight: .infinity)
        .background {
            LinearGradient(colors: [.black, .teal],
                           startPoint: .topLeading,
                           endPoint: .bottomTrailing)
            .edgesIgnoringSafeArea(.all)
      }
   }

•  setting the maxWidth and maxHeight parameters of the frame modifier to .infinity will set the frame size of VStack to the entire screen size.
• .edgesIgnoringSafeArea(.all): as the name suggests, this will ignore the edges of the screen i.e. status bar area and bottom area.

Now let’s get to the final and most important part of this tutorial. Let’s change the simple gradient background to the animated gradient background.

struct ContentView:View{
    
    @State var animateGradient: Bool = false
    var body: some View {
        
        VStack{
            Image(systemName: "swift")
                .font(.system(size: 130, weight: .light))
                .padding(.top, 80)
                .padding(.bottom, 64)
                .foregroundColor(.white.opacity(0.8))
            
        }
        .frame(maxWidth: .infinity,maxHeight: .infinity)
        .background {
            LinearGradient(
                colors: [.black, .teal],
                startPoint: .topLeading,
                endPoint: .bottomTrailing)
            .edgesIgnoringSafeArea(.all)
            .hueRotation(.degrees(animateGradient ? 45 : 0))
            
            .onAppear {
             withAnimation(
             .easeInOut(duration: 3)
             .repeatForever())
             {
             animateGradient.toggle()
             }
           }
        }
    }
}

• .hueRotation(.degrees( 45 ): This will change the angle of the gradient color to the provided degree. This means it will give the entire new color depending on the degree we provide to it.
• repeatForever: this will repeat the animation infinitely.
• onAppear: this method executes just when the view appears on the screen.

We have bounded the hueRotation modifier to the state property animatedGradient. It is set to the condition that the hue or Color is rotated by 45 degrees when animatedGradient is true and 0 degrees when it is false.

The onAppear modifier triggers the animation when the view appears on the screen by changing the state of animatedGradient. Whenever it toggles the state of animatedGradient property from false to true, the hueRotation modifier will change the gradient color by 45 degrees which will give a nice gradient animation effect.

The withAnimation uses the easeInOut timing curve and has a duration of 3 seconds.

It is used to change the state property, animatedGradient, with a slight animation and it will also repeat the animation by changing the state property repeatedly.

The repeatForever modifier makes sure that animation repeats indefinitely.

With some modification, different customized animated gradient backgrounds can be created in SwiftUI.