效果图:
代码片段:
-(void)createView
{
self.backgroundColor=[UIColor grayColor];
//渐变layer
CAGradientLayer *gradienLayer=[CAGradientLayer layer];
[self.layer addSublayer:gradienLayer];
gradienLayer.frame=CGRectMake(0, 200, self.frame.size.width, 64);
gradienLayer.colors=@[
(__bridge id)[UIColor blackColor].CGColor,
(__bridge id)[UIColor whiteColor].CGColor,
(__bridge id)[UIColor redColor].CGColor
];
gradienLayer.locations=@[@0.25,@0.5,@.75];
//渐变方向
gradienLayer.startPoint=CGPointMake(0, .5);
gradienLayer.endPoint=CGPointMake(1, .5);
}
说明:
colors属性是设置CAGradientLayer的渐变颜色(此Demo是从黑-->白-->黑)。
locations属性是相对于colors设置的,此Demo中locations值的含义是按颜色渐变方向划分,从(0 -> 0.25)部分是黑色,从(0.25 -> 0.5)部分是黑到白的渐变过程,以此类推0.75的含义。
注意
1.CAGradientLayer默认的渐变方向是从上到下,即垂直方向。
2.colors是个NSArray类型,只能存对象,所以需要将CGColor转换一下,此属性可设置多个值(1个,2个,3个等...,都行),此Demo的滑动解锁效果只需要两种颜色的渐变,所以设置了三个值,实际值可根据需求设置。
3.设置好colors要设置好与之相对应的locations值
4.如果要改变CAGradientLayer的渐变方向,则要显式的给startPoint
和endPoint两个属性赋值。改为水平方向,则需要改成
gradientLayer.startPoint = CGPointMake(0,0.5);
gradientLayer.endPoint = CGPointMake(1,0.5)
startPoint,endPoint原理解析
既然CAGradientLayer可以绘制出渐变颜色的效果,那自然有颜色渐变的方向,所以这两个属性的作用就是设置颜色渐变的起始点和结束点,这两个属性共同决定了颜色渐变的方向: