UIButton 背景色渐变动画

UIButton 背景色渐变动画

项目有个需求需要UIButton上的背景色是渐变动画的效果,如下。
这里写图片描述


实现

CAGradientLayer 用于实现渐变效果,CABasicAnimation用于对Layer做动画
源码:https://github.com/LSnumber1/ButtonColorGradientAnimation

代码和注解如下

class ViewController: UIViewController {

    @IBOutlet weak var colorButton: UIButton!
    var progress: CGFloat = 0.0 //用于控制显示动画次数哦
    var caGradientLayer: CAGradientLayer? //渐变色实现
    var firstColors:[Any]?  //动画处使用,动画开始颜色组
    var endColors:[Any]? //动画处使用,动画结束颜色组
    override func viewDidLoad() {
        super.viewDidLoad()
        colorButton.layer.cornerRadius = 10
        initGradientLayerView()
    }
}
//MARK: - CAAnimationDelegate
extension ViewController: CAAnimationDelegate {
    func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {

        if progress < 10 {
            caGradientLayer?.colors = endColors
            gradientAnimation()
        }
        progress += 1.0
    }
}
//MARK: - UI
extension ViewController {
    ///初始化CAGradientLayer
    func initGradientLayerView() {
        caGradientLayer = CAGradientLayer()
        caGradientLayer?.frame = CGRect(x: 0, y: 0, width: 200, height: 50)
        caGradientLayer?.cornerRadius = 10
        caGradientLayer?.startPoint = CGPoint(x: 0.0, y: 0)
        caGradientLayer?.endPoint = CGPoint(x: 1.0, y: 0)
        let colors = [
            UIColor.brown.cgColor,
            UIColor.red.cgColor,
            UIColor.orange.cgColor,
            UIColor.cyan.cgColor
        ]
        caGradientLayer?.colors = colors
        firstColors = colors
        //Button上添加Layer
        colorButton.layer.addSublayer(caGradientLayer!)
        //开始动画
        self.gradientAnimation()
    }
}
//MARK: - 动画
extension ViewController {
    ///Layer动画
    @objc func gradientAnimation() {
        var colorArray = caGradientLayer?.colors

        if endColors != nil {
            firstColors = endColors
        }
        let lastColor = colorArray?.last
        colorArray?.removeLast()

        if let aColor = lastColor {
            colorArray?.insert(aColor, at: 0)
        }
        endColors = colorArray
        let animation = CABasicAnimation(keyPath: "colors")
        animation.fromValue = firstColors
        animation.toValue = endColors
        animation.duration = 2
        animation.fillMode = kCAFillModeForwards
        animation.isRemovedOnCompletion = false
        animation.delegate = self
        caGradientLayer?.add(animation, forKey: "animateGradient")
    }
}

猜你喜欢

转载自blog.csdn.net/qin_shi/article/details/79972856