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%:全是color3startPoint,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