CAGradientLayer颜色渐变

    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中的分割点也是一起点和终点所划分的区域进行分割的。

图1-1.png

图1-2

示例代码

效果如下所示

图2.png

利用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];