swift - layer - 渐变色 - CAGradientLayer

 

知道控件的frame ，创建控件时候直接加上 渐变色

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 创建背景渐变色button（通用于View or Controller底部按钮），bounds计算后传入 static func createGradientButton(font: UIFont = UIFont.systemFont(ofSize: 14), textColor: UIColor = UIColor.white, titleStr: String? = nil,bounds:CGRect) -> UIbutton {     let btn = UIButton(type: .custom)     btn.translatesAutoresizingMaskIntoConstraints = false     btn.setTitle(titleStr, for: .normal)     btn.titleLabel?.font = font     btn.setTitleColor(textColor, for: .normal)     btn.backgroundColor = UIColor.clear     let caGradientLayer:CAGradientLayer = CAGradientLayer()     caGradientLayer.colors = [UIColor(hexString: "#E0AD7D").cgColor,UIColor(hexString: "#FFE8C9").cgColor]     caGradientLayer.locations = [0, 1]     caGradientLayer.startPoint = CGPoint(x: 0, y: 1)     caGradientLayer.endPoint = CGPoint(x: 0.8, y: 1)     caGradientLayer.frame = bounds     btn.layer.insertSublayer(caGradientLayer, at: 0)     return btn }

　　

2. 不知道 frame

1。创建 渐变色

?

1 2 3 4 5 6 7 8 9 10

/// 渐变色：默认从上到下  private var gradientLayer: CAGradientLayer = {      let g = CAGradientLayer()      g.colors = [UIColor.init(hexColor: "DBB479").cgColor,                      UIColor.init(hexColor: "F7E1B3").cgColor]      //改为从左到右 的渐变      g.startPoint = CGPoint(x: 0, y: 0)      g.endPoint = CGPoint(x: 1, y: 0)      return g  }()

　　

2.给指定view 添加渐变色

?

1 2 3 4 5 6 7 8 9 10 11

/// 荣誉背景图 private lazy var credibilityBgView : UIView = {     let v = UIView()     v.layer.addSublayer(self.gradientLayer)     v.translatesAutoresizingMaskIntoConstraints = false     v.layer.cornerRadius = 5     v.layer.masksToBounds = true     v.isUserInteractionEnabled = true     v.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(clcikCredibilityBgView)))     return v }()

　　

3. 在自定义的view中 设置 渐变色frame：draw

?

1 2 3 4

override func draw(_ rect: CGRect) {     super.draw(rect)     gradientLayer.frame = credibilityBgView.bounds }

 

4.如果在控制器里面，viewDidLayoutSubviews

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

override func viewDidLayoutSubviews() {        super.viewDidLayoutSubviews()        nextBtnAddLayer()    }      /// 下一步按钮添加渐变色    func nextBtnAddLayer(){        let gradient = CAGradientLayer()        gradient.colors = [UIColor.init(hexString: "#FD904B").cgColor,                           UIColor.init(hexString: "#FFA64D").cgColor ]        //改为从左到右 的渐变        gradient.startPoint = CGPoint(x: 0, y: 0)        gradient.endPoint = CGPoint(x: 1, y: 0)        nextBtn.layer.insertSublayer(gradient, at: 0)        gradient.frame = nextBtn.bounds    }

　　

注意 直接用addSubLayer 会遮盖住 子控件， 使用insertSublayer 不会有问题

　　

 

 

 

上面 是同一个渐变色的 colors 更换，  

?

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

//渐变色     private lazy var caGradientLayer : CAGradientLayer = {         let caGradientLayer:CAGradientLayer = CAGradientLayer()         caGradientLayer.colors = []         caGradientLayer.locations = [0, 1]         caGradientLayer.startPoint = CGPoint(x: 0, y: 1)         caGradientLayer.endPoint = CGPoint(x: 0.8, y: 1)         return caGradientLayer     }()       /// 渐变色颜色     private lazy var cgColors: (normal: [CGColor] , select: [CGColor] ) = ([] , [])         /// 渐变色 更改 颜色     /// - Parameters:     ///   - basicAnimationKeyPath: 动画对应的唯一标示     ///   - animationKey: 渐变色 添加的 动画 唯一标示     ///   - toChangeColors: 改变的颜色数组     ///   - duration: 动画时间     private func addAnimationForCaGradientLayer(basicAnimationKeyPath:String,                                                 animationKey:String,                                                 toChangeColors:[CGColor],                                                 durationTime:CFTimeInterval = 0.05){         //添加渐变动画         let colorChangeAnimation = CABasicAnimation(keyPath: basicAnimationKeyPath)         colorChangeAnimation.delegate = self         colorChangeAnimation.duration = durationTime         colorChangeAnimation.toValue = toChangeColors         colorChangeAnimation.fillMode = CAMediaTimingFillMode .forwards         colorChangeAnimation.isRemovedOnCompletion = false         caGradientLayer.add(colorChangeAnimation, forKey: animationKey)     }     开始定时器是         self.addAnimationForCaGradientLayer(basicAnimationKeyPath: "colorSelected", animationKey: "colorChangeToSelected", toChangeColors: self.cgColors.select)   然后倒计时结束的时候             self.setTitle("重新发送", for: .normal)             self.addAnimationForCaGradientLayer(basicAnimationKeyPath: "colorNormal", animationKey: "colorChangeToNormal", toChangeColors: self.cgColors.normal)