CAGradientLayer的使用

CAGradientLayer是CALayer的子类，它经常用来实现颜色渐变，可以翻译为：渐变图层；gradient 可以翻译为梯度，渐变。

接下来我用Swift进行演示（Swift越来越火了，如果不熟悉，一定要好好学学）

先看看效果：

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        self.view.backgroundColor = UIColor.white
        
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = self.view.bounds
        self.view.layer.addSublayer(gradientLayer)
        
        // 颜色分配
        gradientLayer.colors = [
            UIColor.red.cgColor,
            UIColor.yellow.cgColor,
            UIColor.blue.cgColor
        ]
        /*
         // 颜色分布：
         从0到第一个值，保持第一种颜色；
         从最后一个值到1，保持最后一种颜色；
         从n->n+1，完成从 第n个颜色 到 第n+1个颜色 的变换；
         */
        let arr = [
            0.25,
            0.5,
            0.75
        ]
        gradientLayer.locations = arr as [NSNumber]?
        
        // 下面两个参数是：开始点，结尾点；两点之间的连线可以形成一个矢量方向，即是渐变的方向
        gradientLayer.startPoint = CGPoint.init(x: 0, y: 0) // 左上角
        gradientLayer.endPoint = CGPoint.init(x: 1, y: 0) // 右上角
   }

属性讲解

• colors 和 locations（核心属性）
  colors: 这是一个数组，里面是CGColor，指的是，layer里都有哪些颜色
  locations：这是一个数组，里面存的是Number，1代表100%
  以上两个属性需要配合使用，打个比方：
  如果colors是 color1，color2，color3；locations是 s1，s2，s3；
  那么就意味着：
  从0到s1：全是color1
  从s1到s2：完成由color1到color2的变换
  从s2到s3：完成由color2到color3的变换
  从s3到100%：全是color3

• startPoint，endPoint
  上面两个属性分别为“开始点”，“结尾点”，两个点连线的方向 就是颜色渐变的方向；
  （0，0）：左上角
  （0，1）：左下角
  （1，0）：右上角
  （1，1）：右下角
  例如：
  start = （0，0），end = （1，0）
  则方向就是水平向右，并且变换到最右边
  如果 start = （0，0），end = （0.5，0.5）
  则方向是从左上角到矩形的中心，只渐变一般哦，可以试试看

如果觉得对您有帮助，就star一下吧。您的star就是对我最大的鼓励！
如果发现什么问题，或者有什么意见，请加我qq或微信：704158807
电子邮箱：pangshishan@aliyun.com