Gradient layer is used to create a gradient of color containing maximum numbers of colors. Means it is a combination of different colors and the output colors are spread over the layers in such a way that it have equal space between each layer in equal amount also we can specify locations for color positions over the gradient.

Mostly developers use certain colors in their apps to make their app look more attractive. Using a gradient of colors is a better option for the developers.

CAGradientLayer is a sub-class of the CALayer class which is contained by every object of view and exists only for making gradient effects. Also, CAGradientLayer does not support radial gradient layer.

So, in this tutorial, We will learn about Creating CAGradient Layer and Animations in CAGradient Layer.

Let's Start

First, How do we create a CAGradientLayer

In the example given below, we are showing you the steps to create a CAGradientLayer.

//Creating a View For Gradient

let myView:UIView = UIView(frame:CGRect(x:0,y:0,width:300,height:300)

//Initializing the gradient layer.

let myGradientLayer: CAGradientLayer = CAGradientLayer()

//Setting frame for Gradient Layer

myGradientLayer = myView.bounds

//Top Gradient Color

let topColor:CGColor = UIColor.pink.cgColor

//Bottom Gradient Color

let bottomColor:CGColor = UIColor.green.cgColor 

//Setting my colors

myGradientLayer.colors = [topColor,bottomColor]

//Setting your color location

myGradientLayer.locations = [0.0,1.0]

//Adding gradient Layer

view.layer.insertSublayer(myGradientLayer,at:0)

Now let's how to animate a change in color in CAGradientLayer

//Getting the recent color of the gradient

let previousColors = self.myGradientLayer.colors

//Giving new colors to the gradient

let newColor = [UIColor.pink.cgColor,UIColor.green.cgColor]

//Setting new color for gradient

self.myGradientLayer.colors = newColor

//Initializing animation for changing color of gradient

let myAnimation:CABasicANimation = CABasicAnimation(keypath: "colors")

//setting the color value

animation.fromValue = previousColors

//Setting new color value

animation.toValue = newColor

//Setting animation duration

animation.duration = 0.2

//Removing animation when completed

animation.isRemovedOnCompletion = true

//On completion setting it to remain in final state

animation.fillMode = KCAFillModeForwards

//Causing an animation to occur within its duration by setting linear pacing

animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)

//Setting animation delegate

animation.delegate = self

//Adding animation

self.gradientLayer.addAnimation(animation, forKey: "animateGradientColor")

That's all about Gradient layer for now, Enjoy the colors. For any queries feel free to write in comments section below