Updated 26 November 2021
Hello guys, Today we learn about Gradient Color With Animation In Swift.
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 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
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
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
|
1 2 3 |
@IBOutlet weak var playBtnOutlet: UIButton! @IBOutlet weak var gradientView2: gradientView! @IBOutlet weak var gradientView: gradientView! |
Step 6:- Lastly, add the code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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] ) 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]) } } } |
step 6:- Finally, run the code and see the output
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!!
If you have more details or questions, you can reply to the received confirmation email.
Back to Home
Be the first to comment.