Gradient Color With Animation In Swift

Khushboo Gupta

26 November 2021

Hello guys, Today we learn about Gradient Color With Animation In Swift.

What is gradient color :-

Gradient color is a specific position range that is depending upon multiple colors.

By using gradient color functionality we can add multiple colors in a single UIView(), UIImageView().
In the application, every developer uses the color combination along with view or image to make the app more effective and look good.

Animation:-

Animation is a method in which images or lists are modified to appear as moving objects. by using animation we give the extra effect in or app by moving table list with different- different effects like – animation list from the top, bottom, left, and right e.t.c

Getting Start:-

Step1:- Firstly, create a new Xcode project

File -> New -> Project -> choose ios -> choose App -> next and add your project name and create.

Step2:- Then, create the design in the storyboard –

step 3:- Now, create one UIVIew() class for gradient view for example I create MyGradientClass.swift class file and add the code for gradient view and animation.

import Foundation
import UIKit

class gradientView: UIView{
    @discardableResult
    func addGradientLayer(colors: &#091;CGColor], location: &#091;NSNumber]?) -&gt; CAGradientLayer {
        
        let gradientLayer = CAGradientLayer()
        
        gradientLayer.frame = self.bounds
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
        gradientLayer.colors = &#091;colors&#091;0], colors&#091;1], colors&#091;0]]
       
        gradientLayer.locations = location
        self.layer.addSublayer(gradientLayer)
        
        return gradientLayer
    }
    
    func addAnimation() -&gt; CABasicAnimation {
       
        let animation = CABasicAnimation(keyPath: "locations")
        animation.fromValue = &#091;-1.0, -0.5, 0.0]
        animation.toValue = &#091;1.0, 1.5, 2.0]
        animation.repeatCount = .infinity
        animation.duration = 0.9
        return animation
    }
    
    func startAnimating(colors: &#091;CGColor], location: &#091;NSNumber]){
        
        let gradientLayer = addGradientLayer(colors: colors, location: location)
        print("fff\(colors)")
        let animation = addAnimation()
       gradientLayer.add(animation, forKey: animation.keyPath)
        
       
    }
}

import Foundation

import UIKit

class gradientView: UIView{

@discardableResult

func addGradientLayer(colors: [CGColor], location: [NSNumber]?) -> CAGradientLayer {

let gradientLayer = CAGradientLayer()

gradientLayer.frame = self.bounds

gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)

gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)

gradientLayer.colors = [colors[0], colors[1], colors[0]]

gradientLayer.locations = location

self.layer.addSublayer(gradientLayer)

return gradientLayer

}

func addAnimation() -> CABasicAnimation {

let animation = CABasicAnimation(keyPath: "locations")

animation.fromValue = [-1.0, -0.5, 0.0]

animation.toValue = [1.0, 1.5, 2.0]

animation.repeatCount = .infinity

animation.duration = 0.9

return animation

}

func startAnimating(colors: [CGColor], location: [NSNumber]){

let gradientLayer = addGradientLayer(colors: colors, location: location)

print("fff\(colors)")

let animation = addAnimation()

gradientLayer.add(animation, forKey: animation.keyPath)

}

Step 4:- Then, add your UIView() class name in created view in the storyboard.

Step 5:- Now, create the outlets

@IBOutlet weak var playBtnOutlet: UIButton!
    @IBOutlet weak var gradientView2: gradientView!
    @IBOutlet weak var gradientView: gradientView!

@IBOutlet weak var playBtnOutlet: UIButton!

@IBOutlet weak var gradientView2: gradientView!

@IBOutlet weak var gradientView: gradientView!

Step 6:- Lastly, add the code

import UIKit

class ViewController: UIViewController {


    @IBOutlet weak var playBtnOutlet: UIButton!
    @IBOutlet weak var gradientView2: gradientView!
    @IBOutlet weak var gradientView: gradientView!
    var isSelected = false
    override func viewDidLoad() {
        super.viewDidLoad()
        gradientView.startAnimating(colors: &#091;#colorLiteral(red: 0.1960784346, green: 0.3411764801, blue: 0.1019607857, alpha: 1).cgColor,#colorLiteral(red: 0.721568644, green: 0.8862745166, blue: 0.5921568871, alpha: 1).cgColor], location: &#091;0.0, 0.5, 1.0] )
        gradientView2.addGradientLayer(colors: &#091;#colorLiteral(red: 0.8862745098, green: 0.1289999932, blue: 0.1099999994, alpha: 1).cgColor, #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0).cgColor], location: &#091;0.0, 0.5, 0.9])
        // Do any additional setup after loading the view.
    }
    
    @IBAction func playButton(_ sender: Any) {
        isSelected = !isSelected
        if isSelected {
            playBtnOutlet.setTitle("stop", for: .normal)
            gradientView.addGradientLayer(colors: &#091;#colorLiteral(red: 0.1019607857, green: 0.2784313858, blue: 0.400000006, alpha: 1).cgColor,#colorLiteral(red: 0.4745098054, green: 0.8392156959, blue: 0.9764705896, alpha: 1).cgColor], location: &#091;0.0, 0.5, 1.0] )
            gradientView2.startAnimating(colors: &#091;#colorLiteral(red: 0.5058823824, green: 0.3372549117, blue: 0.06666667014, alpha: 1).cgColor, #colorLiteral(red: 0.9764705896, green: 0.850980401, blue: 0.5490196347, alpha: 1).cgColor], location: &#091;0.0, 0.5, 0.9])
        }else{
            playBtnOutlet.setTitle("play", for: .normal)
            gradientView.startAnimating(colors: &#091;#colorLiteral(red: 0.1960784346, green: 0.3411764801, blue: 0.1019607857, alpha: 1).cgColor,#colorLiteral(red: 0.5843137503, green: 0.8235294223, blue: 0.4196078479, alpha: 1).cgColor], location: &#091;0.0, 0.5, 1.0] )
            gradientView2.addGradientLayer(colors: &#091;#colorLiteral(red: 0.8862745098, green: 0.1289999932, blue: 0.1099999994, alpha: 1).cgColor, #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0).cgColor], location: &#091;0.0, 0.5, 0.9])
            
        }
    }
}

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var playBtnOutlet: UIButton!

@IBOutlet weak var gradientView2: gradientView!

@IBOutlet weak var gradientView: gradientView!

var isSelected = false

override func viewDidLoad() {

super.viewDidLoad()

gradientView.startAnimating(colors: [#colorLiteral(red: 0.1960784346, green: 0.3411764801, blue: 0.1019607857, alpha: 1).cgColor,#colorLiteral(red: 0.721568644, green: 0.8862745166, blue: 0.5921568871, alpha: 1).cgColor], location: [0.0, 0.5, 1.0] )

gradientView2.addGradientLayer(colors: [#colorLiteral(red: 0.8862745098, green: 0.1289999932, blue: 0.1099999994, alpha: 1).cgColor, #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0).cgColor], location: [0.0, 0.5, 0.9])

// Do any additional setup after loading the view.

}

@IBAction func playButton(_ sender: Any) {

isSelected = !isSelected

if isSelected {

playBtnOutlet.setTitle("stop", for: .normal)

gradientView.addGradientLayer(colors: [#colorLiteral(red: 0.1019607857, green: 0.2784313858, blue: 0.400000006, alpha: 1).cgColor,#colorLiteral(red: 0.4745098054, green: 0.8392156959, blue: 0.9764705896, alpha: 1).cgColor], location: [0.0, 0.5, 1.0] )

gradientView2.startAnimating(colors: [#colorLiteral(red: 0.5058823824, green: 0.3372549117, blue: 0.06666667014, alpha: 1).cgColor, #colorLiteral(red: 0.9764705896, green: 0.850980401, blue: 0.5490196347, alpha: 1).cgColor], location: [0.0, 0.5, 0.9])

}else{

playBtnOutlet.setTitle("play", for: .normal)

gradientView.startAnimating(colors: [#colorLiteral(red: 0.1960784346, green: 0.3411764801, blue: 0.1019607857, alpha: 1).cgColor,#colorLiteral(red: 0.5843137503, green: 0.8235294223, blue: 0.4196078479, alpha: 1).cgColor], location: [0.0, 0.5, 1.0] )

}

step 6:- Finally, run the code and see the output

Conclusion:-

In this blog, we discussed Gradient color with animation

I hope this blog will help you to get about gradient color with animation

Thanks for reading!!