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

推荐阅读更多精彩内容