Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • How to Create CAGradient Layer & Implement Animation in iOS App

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 627
    Comment on it

    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 =


    //Bottom Gradient Color

    let bottomColor:CGColor = 


    //Setting my colors

    myGradientLayer.colors = [topColor,bottomColor]


    //Setting your color location

    myGradientLayer.locations = [0.0,1.0]


    //Adding gradient Layer



    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 = [,]


    //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

    How to Create CAGradient Layer & Implement Animation in iOS App

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: