CAGradientLayer制作颜色渐变效果,常于CAShapeLayer结合使用。CAShapeLayer绘制形状,CAGradientLayer提供颜色渐变。如果形状不是正方形的话,layer会被拉伸。
属性介绍
//颜色数组,支持动画
@property(nullable, copy) NSArray *colors;
//每种颜色的最亮的位置,受startPoint、endPoint的影响。locations中的百分比是以startPoint、endPoint两点之间的距离为准的,支持动画
@property(nullable, copy) NSArray*locations;
//颜色开始变化的地方,支持动画
@property CGPoint startPoint;
//颜色结束变化的地方,支持动画
@property CGPoint startPoint;
//分布类型
@property(copy) NSString *type;
startPoint、startPoint的取值都是在0-1之间,代表的是比例值。之前我们说过坐标系统的介绍,这里就不多说了。它们共同确定了,渐变的方向和区域如下图所示,图1-1为startPoint(0,0)、endPoint(1,0)的渐变图片,图1-2为startPoint(0,0)、endPoint(0.5,0)的渐变图片。起点都在原点,都是只有x值变化了。所以将两点连接起来所指向的方向就是渐变方向。但是图1-1的x值为1,图1-2的x值为0.5。所以图1-2的颜色渐变区域为图1-1的一半。属性locations中的分割点也是一起点和终点所划分的区域进行分割的。
示例代码
效果如下所示
利用CAGridientLayer,提供渐变色。利用CAShapeLayer提供形状。
代码很简单
CAGradientLayer *layer = [CAGradientLayer layer];
layer.frame = CGRectMake(10, 100, 120, 120);
//渐变的颜色
layer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor greenColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];
//渐变点
layer.locations = @[@0.2, @0.4, @0.6];
//起点
layer.startPoint = CGPointMake(0, 0);
//终点
layer.endPoint = CGPointMake(0.5, 0);
//提供形状
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, layer.frame.size.width, 30)].CGPath;
layer.mask = maskLayer;
[self.view.layer addSublayer:layer];