CALayer CAGradientLayer(梯度圖層)

** CAGradientlayer可以繪製一個充滿整個圖層的顏色梯度(包括原型圖層等圖層)在一個背景顏色上 **

在瞭解CAGradientLayer之前,我們先要了解一下CALayer的座標,如下圖,一個Layer的左上角為(0,0),其右下角座標為(1,1),中心點是(0.5,0.5),任何圖層都是如此,和父圖層以及自身的形狀無關.

####屬性

• colors var colors: [AnyObject]? 一個內部是CGColorRef的陣列,規定所有的梯度所顯示的顏色,預設為nil

• locations var locations: [NSNumber]? 一個內部是NSNumber的可選陣列,規定所有的顏色梯度的區間範圍,選值只能在0到1之間,並且陣列的資料必須單增,預設值為nil

• endPoint var endPoint: CGPoint 圖層顏色繪製的終點座標,也就是階梯圖層繪製的結束點,預設值是(0.5,1.0)

• startPoint var startPoint: CGPoint 與endPoint相互對應,就是繪製階梯圖層的起點座標,繪製顏色的起點,預設值是(0.5,0.0)

• type var type:String 繪製型別,預設值是kCAGradientLayerAxial,也就是線性繪製,各個顏色階層直接的變化是線性的

---

####例項 通過屬性大家都差不多知道該如何使用階梯圖層了,接下來我們看一下普通的例子,然後討論幾種情況

//
//  ViewController.swift
//  CALayer-CAGradientLayer
//
//  Created by 蔡士林 on 6/16/16.
//  Copyright © 2016 BZ. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // 建立階梯圖層
        let gradientLayer = CAGradientLayer()
        // 設定階梯圖層的背景
        //gradientLayer.backgroundColor = UIColor.grayColor().CGColor
        // 圖層的顏色空間(階梯顯示時按照陣列的順序顯示漸進色)
        gradientLayer.colors = [UIColor.redColor().CGColor,UIColor.blueColor().CGColor,UIColor.greenColor().CGColor]
        // 各個階梯的區間百分比
        gradientLayer.locations = [0.1,0.6,1]
        gradientLayer.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.width)
        gradientLayer.position = self.view.center
        // 繪圖的起點(預設是(0.5,0))
        gradientLayer.startPoint = CGPointMake(1, 0)
        // 繪圖的終點(預設是(0.5,1))
![Uploading (0,0.5)(1,0.5)@2x_114834.png . . .]

        gradientLayer.endPoint = CGPointMake(0, 1)
        self.view.layer.addSublayer(gradientLayer)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}
複製程式碼

系統預設的繪製方向,從上往下的

這是起點為(0,0.5),終點(1,0.5),時橫向繪製

以起點和終點所畫出來的直線做中心軸繪製

####動畫

CAGradientLayer的所有屬性都能產生隱式動畫我們可以通過NSTimer來定時修改Location(其他的也可以(⊙o⊙)哦)

//
//  ViewController.swift
//  CALayer-CAGradientLayer
//
//  Created by 蔡士林 on 6/16/16.
//  Copyright © 2016 BZ. All rights reserved.
//

import UIKit

class ViewController: UIViewController {
    
    var graLayer:CAGradientLayer!
    var index = 0.1

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let gradientLayer = CAGradientLayer()
        gradientLayer.backgroundColor = UIColor.grayColor().CGColor
        gradientLayer.colors = [UIColor.redColor().CGColor,UIColor.blueColor().CGColor,UIColor.greenColor().CGColor]
        gradientLayer.locations = [0.1,0.15,1]
        gradientLayer.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.width)
        gradientLayer.position = self.view.center
        gradientLayer.startPoint = CGPointMake(1, 0)
        gradientLayer.endPoint = CGPointMake(0, 1)
        self.graLayer = gradientLayer
        self.view.layer.addSublayer(gradientLayer)
        
        
        
    }
    
    override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
        NSTimer.scheduledTimerWithTimeInterval(0.02, target: self, selector: #selector(ViewController.change), userInfo: nil, repeats: true)
    }
    
    func change(){
        index = index + 0.01
        let twoIndex = index + 0.05
        graLayer.locations = [index,twoIndex,1]
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}
複製程式碼

當然了你也可以設定它的其他屬性來實現各種各樣的動畫,你可以充分發揮你的想象力~

####有幫助的希望大家點個❤,也是對我的一點點鼓勵~