swift-layer-渐变色-CAGradientLayer

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›Swift 教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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

    // 创建背景渐变色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。创建渐变色

   /// 渐变色：默认从上到下
    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 添加渐变色

    /// 荣誉背景图
    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

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

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

 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 更换，

    //渐变色
    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)