1.使用CAGradientLayer实现渐变
//CGColorRef对象的数组定义每个梯度停止的颜色。默认为零。可以做成动画
@property(nullable, copy) NSArray *colors;
//颜色分割线,locations并不是表示颜色值所在位置,它表示的是颜色在Layer坐标系相对位置处要开始进行渐变颜色了。可以做成动画
locations数组并不是强制要求的,但是如果你给它赋值了就一定要确保 的数组大小和 colors 数组大小一定要相同,否则你将会得到一个空白的渐变。
@property(nullable, copy) NSArray<NSNumber *> *locations;
//渐变色的起始点和结束点。范围在(0,0)和(1,1)之间,(0,0)(1,0)代表水平渐变,(0,0)(0,1)代表竖直渐变,默认(0.5,0)(0.5,1),可以做成动画
@property CGPoint startPoint;
@property CGPoint endPoint;
gradientLayer = [[CAGradientLayer alloc] init];
//渐变的颜色
gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor yellowColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];
//渐变颜色的分割点
gradientLayer.locations = @[@0.3,@0.6];
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(1, 1);
gradientLayer.frame = CGRectMake(10, 100, 200, 200);
[self.view.layer addSublayer:gradientLayer];
2.使用Core Graphics
绘制渐变的方法有两种:CGContextDrawLinearGradient绘制线性渐变颜色区域 CGContextDrawRadialGradient绘制圆形方向渐变区,原来就是设置剪切区域和颜色渐变的起始点
- (void)drawLinearGradient:(CGContextRef)context
path:(CGPathRef)path
startColor:(CGColorRef)startColor
endColor:(CGColorRef)endColor {
//创建一个RGB的颜色空间
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
//颜色渐变区域
CGFloat locations[] = {0.0,1.0};
//定义渐变颜色数组
NSArray *colors = @[(__bridge id)startColor,(__bridge id)endColor];
//创建一个简便的色值
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)colors, locations);
//获取CGPathRef的矩形区域
CGRect pathRect = CGPathGetBoundingBox(path);
//等到自己想要的渐变方向
CGPoint startPoint = CGPointMake(CGRectGetMinX(pathRect), CGRectGetMinY(pathRect));
CGPoint endPoint = CGPointMake(CGRectGetMaxX(pathRect), CGRectGetMaxY(pathRect));
//将当前图形状态推入堆栈,对图形状态所做的修改会影响随后的绘图操作,但不会影响储存在堆栈中的图形状态
CGContextSaveGState(context);
CGContextAddPath(context, path);
CGContextClip(context);
//绘制线性渐变
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
//返回之前的图形状态
CGContextRestoreGState(context);
//释放
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);
}