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.
![](http://findnerd.s3.amazonaws.com/imagedata/8447/8447.jpeg)
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
0 Comment(s)