CAGradientLayer最简使用

简介：CAGradientLayer作为CALayer的子类，唯一的用途就是用来做颜色渐变，梯度动画效果等。首先要使用CAGradientLayer, 最基本的四个步骤

    1. 初始化一个CAGradientLayer实例
    2. 设置CAGradientLayer实例的frame
    3. 给这个实例设置所有要渐变的颜色
    4. 把这个实例Layer添加到你想要展示的View的layer上去

CAGradientLayer主要有下面几个重要的属性：colors(要展示的渐变颜色数组), locations(每个颜色值开始的位置), startPoint 和 endPoint (渐变颜色的方向)。 下面一一介绍。（以下代码以swift 3为准）

1.基本应用

    var gradientlayer: CAGradientLayer! // 1. 创建CAGradientLayer实例
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        createGradientLayer()
    }
    
    func createGradientLayer() {
        gradientlayer = CAGradientLayer()
        gradientlayer.frame = view.bounds //2. 设置frame
        gradientlayer.colors = [UIColor.black().cgColor, UIColor.blue().cgColor] // 3. 设置要展示的颜色
        view.layer.addSublayer(gradientlayer) // 4. 添加到目标view的layer上
    }

执行结果

2.locations属性

    func createGradientLayer() {  
       ...
       // locations属性代表每个颜色开始的位置，其中第一个0.1代表
       // 第一个颜色到gradientlayer.frame的10%处为止，第二个0.9
       // 表示第二个颜色从gradientlayer.frame的90%处开始，0.4~0.9
       // 中间的部分是渐变部分
        gradientlayer.locations = [0.1, 0.9] 
       ...
    }

执行结果如下：

执行结果.png

下面，稍微更改一下，把locations 改为 [0.1, 0.1]

gradientlayer.locations = [0.1, 0.1]

执行效果应该是这样的：黑色到10%的位置结束，蓝色从10%的位置开始，中间没有渐变颜色

执行结果.png

3.startPoint 和 endPoint

startPoint指示的是渐变颜色的开始位置，endPoint指示的是渐变颜色的结束位置, 两者结合起来就代表了渐变颜色的方向。这里的位置对应的坐标系如下图所示（如图，这里的坐标值x,y是在0.0~1.0之间的值），不多解释

locations对应的坐标系统.png

比如，设置startPoint和endPoint如下

        gradientlayer.startPoint = CGPoint(x: 0.0, y: 0.0)
        gradientlayer.endPoint = CGPoint(x: 1.1, y: 1.1)

展示结果应该是斜对角方向的颜色渐变（因为上面设置了locations=[0.1,0.1], 所以这里是没有颜色渐变的）

执行结果.png