iOS CAShapeLayer和CAGradientLayer
CAShapeLayer类
CAShapeLayer继承自CALayer的，通过矢量图形绘制图层子类，指定诸如颜色和线宽等属性，用CGPath来绘制图形，常与UIBezierPath配合使用。
CAShapeLayer主要属性
// 路径
@property(nullable) CGPathRef path;
// 填充颜色
@property(nullable) CGColorRef fillColor;
// 线条颜色
@property(nullable) CGColorRef strokeColor;
// 线条宽度
@property CGFloat lineWidth;
// 路径绘制开始值，值是[0-1]
@property CGFloat strokeStart;
// 路径绘制结束值，值是[0-1]
@property CGFloat strokeEnd;
// 线帽，kCALineCapButt(默认)，kCALineCapRound(圆形)，kCALineCapSquare(方形)
@property(copy) CAShapeLayerLineCap lineCap;
// 连接点，kCALineJoinMiter(默认，尖角)，kCALineJoinRound(圆角)，kCALineJoinBevel(缺角)
@property(copy) CAShapeLayerLineJoin lineJoin;
// 最大斜接长度
@property CGFloat miterLimit;
// 虚线偏移量
@property CGFloat lineDashPhase;
// 虚线样式
@property(nullable, copy) NSArray<NSNumber *> *lineDashPattern;
示例代码
- (void)drawRoundedRect {
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 100, 80, 60)
byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight cornerRadii:CGSizeMake(20, 10)];
CAShapeLayer *layer = [[CAShapeLayer alloc] init];
layer.path = bezierPath.CGPath;
layer.strokeColor = [UIColor redColor].CGColor;
layer.fillColor = [UIColor greenColor].CGColor;
layer.lineWidth = 3;
layer.strokeStart = 0;
layer.strokeEnd = 0.5;
layer.lineDashPattern = @[@6, @2];
[self.view.layer addSublayer:layer];
}
显示如下
我们可以利用CAShapeLayer的属性，实现一些动画效果
- (void)drawCircleLayer {
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 200, 100, 100)];
CAShapeLayer *layer = [[CAShapeLayer alloc] init];
layer.path = bezierPath.CGPath;
layer.strokeColor = [UIColor redColor].CGColor;
layer.fillColor = [UIColor clearColor].CGColor;
layer.lineWidth = 15;
layer.strokeStart = 0;
layer.strokeEnd = 0;
layer.lineDashPattern = @[@6, @2];
[self.view.layer addSublayer:layer];
self.layer = layer;
self.timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(strokeAction) userInfo:nil repeats:YES];
}
- (void)strokeAction {
if (self.layer.strokeEnd >= 1) {
// 销毁定时器
[self.timer invalidate];
self.timer = nil;
return;
} else {
// 每次+0.05
self.layer.strokeEnd += 0.05;
}
}
显示如下
CAGradientLayer类
CAGradientLayer用色彩梯度展示的layer图层，我们可以很轻松的创建出有过渡效果的色彩图。
CAGradientLayer主要属性
// 图层绘制的起点坐标，默认是(0.5, 0)
@property CGPoint startPoint;
// 图层绘制的终点坐标，默认是(0.5, 1)
@property CGPoint endPoint;
// 颜色分配
@property(nullable, copy) NSArray *colors;
// 颜色分割
@property(nullable, copy) NSArray<NSNumber *> *locations;
// 渐变类型，kCAGradientLayerAxial(默认，线性渐变)，kCAGradientLayerRadial(径向渐变)，kCAGradientLayerConic
@property(copy) CAGradientLayerType type;
CAGradientLayer的坐标系统是从坐标（0，0）到（1，1）绘制的矩形。
CAGradientLayer默认的渐变方向是从上往下，线性渐变。
NSArray *colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor blueColor].CGColor];
CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init];
gradientLayer.frame = CGRectMake(20, 100, 100, 100);
gradientLayer.colors = colors;
[self.view.layer addSublayer:gradientLayer];
// 设置startPoint和endPoint，水平渐变
CAGradientLayer *gradientLayer2 = [[CAGradientLayer alloc] init];
gradientLayer2.frame = CGRectMake(130, 100, 100, 100);
gradientLayer2.colors = colors;
gradientLayer2.startPoint = CGPointMake(0, 0);
gradientLayer2.endPoint = CGPointMake(1, 0);
[self.view.layer addSublayer:gradientLayer2];
// 设置locations，在0.25和0.75处有分割线，0.25前是红色，0.75后是蓝色，0.25~0.75是渐变色
CAGradientLayer *gradientLayer3 = [[CAGradientLayer alloc] init];
gradientLayer3.frame = CGRectMake(240, 100, 100, 100);
gradientLayer3.colors = colors;
gradientLayer3.locations = @[@(0.25), @(0.75)];
[self.view.layer addSublayer:gradientLayer3];
显示如下
CAGradientLayer的radial和conic渐变。
// 从startPoint向endPoint径向渐变
CAGradientLayer *gradientLayer4 = [[CAGradientLayer alloc] init];
gradientLayer4.frame = CGRectMake(50, 400, 100, 100);
gradientLayer4.colors = colors;
gradientLayer4.startPoint = CGPointMake(0.5, 0.5);
gradientLayer4.endPoint = CGPointMake(1, 1);
gradientLayer4.type = kCAGradientLayerRadial;
[self.view.layer addSublayer:gradientLayer4];
if (@available(iOS 12.0, *) ) {
// startPoint是围绕的点，endPoint是起点/终点线
CAGradientLayer *gradientLayer5 = [[CAGradientLayer alloc] init];
gradientLayer5.frame = CGRectMake(200, 400, 100, 100);
gradientLayer5.colors = colors;
gradientLayer5.startPoint = CGPointMake(0.5, 0.5);
gradientLayer5.endPoint = CGPointMake(1, 0.5);
gradientLayer5.type = kCAGradientLayerConic;
[self.view.layer addSublayer:gradientLayer5];
}
显示如下
CALayer的mask属性
mask属性是个CALayer类型，定义了父图层的部分可见区域。
NSArray *colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor blueColor].CGColor];
CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init];
gradientLayer.frame = CGRectMake(240, 100, 100, 100);
gradientLayer.colors = colors;
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(1, 1);
[self.view.layer addSublayer:gradientLayer];
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, 80, 80)];
CAShapeLayer *layer = [[CAShapeLayer alloc] init];
layer.path = bezierPath.CGPath;
layer.strokeColor = [UIColor redColor].CGColor;
layer.fillColor = [UIColor clearColor].CGColor;
layer.lineWidth = 10;
layer.strokeStart = 0;
layer.strokeEnd = 1;
layer.lineDashPattern = @[@6, @2];
gradientLayer.mask = layer;
显示如下
