关于CAShapeLayer的一些实用案例和技巧

本文授权转载，作者：@景铭巴巴

一、使用CAShapeLayer实现复杂的View的遮罩效果

1.1、案例演示

最近在整理一个聊天的项目的时候，发送图片的时候，会有一个三角的指向效果，指向这张图片的发送者。服务端返回给我们的图片只是一张矩形的图片，我们如何把一张矩形的图片或者View，加上一层自定义遮罩效果，就是本文要讲的内容。效果演示如下：第一张是一个View的遮罩效果，第二张是UIImageView的遮罩效果。

演示图片

1.2、实现机制

在每一View的layer层中有一个mask属性，他就是专门来设置该View的遮罩效果的。该mask本身也是一个layer层。我们只需要生成一个自定义的layer，然后覆盖在需要遮罩的View上面即可。问题就归于如何生成入上图所示的不规则图片的Layer。CAShapeLayer可以根据几个点的依次连线，产生一个闭合空间的layer。如下图所示：

1.3、实现代码

实现方式为实现了CAShapeLayer的ViewMask的Category。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

@implementation CAShapeLayer (ViewMask) + (instancetype)createMaskLayerWithView : (UIView *)view{     CGFloat viewWidth = CGRectGetWidth(view.frame);     CGFloat viewHeight = CGRectGetHeight(view.frame);     CGFloat rightSpace = 10.;     CGFloat topSpace = 15.;     CGPoint point1 = CGPointMake(0, 0);     CGPoint point2 = CGPointMake(viewWidth-rightSpace, 0);     CGPoint point3 = CGPointMake(viewWidth-rightSpace, topSpace);     CGPoint point4 = CGPointMake(viewWidth, topSpace);     CGPoint point5 = CGPointMake(viewWidth-rightSpace, topSpace+10.);     CGPoint point6 = CGPointMake(viewWidth-rightSpace, viewHeight);     CGPoint point7 = CGPointMake(0, viewHeight);     UIBezierPath *path = [UIBezierPath bezierPath];     [path moveToPoint:point1];     [path addLineToPoint:point2];     [path addLineToPoint:point3];     [path addLineToPoint:point4];     [path addLineToPoint:point5];     [path addLineToPoint:point6];     [path addLineToPoint:point7];     [path closePath];     CAShapeLayer *layer = [CAShapeLayer layer];     layer.path = path.CGPath;     return layer; } @end

1.4、调用方式

1 2 3 4 5

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(40, 50, 80, 100)]; view.backgroundColor = [UIColor orangeColor]; [self.view addSubview:view]; CAShapeLayer *layer = [CAShapeLayer createMaskLayerWithView:view]; view.layer.mask = layer;

二、使用CAShapeLayer实现一个音量大小动态改变的控件

2.1、案例演示

对于实时显示语音音量大小的需求，发现很多人的实现方式通过预放置多张图进行切换进行完成的。这样的处理，不但会浪费App的资源存储空间，而且效率也不高。对于符合某一定规律动态改变的图形，我们也可以考虑通过代码的方式来实现。

2.2、实现机制

外部轮廓View主要控制显示大小和显示的圆角效果。内部的Layer主要控制动态显示的高度，虽然他是矩形的。但是当把该Layer加入到View中，而该View设置了_dynamicView.clipsToBounds = YES;。内部的Layer超过外部轮廓的部分，则会被切除掉。

如此说来，我们只需要动态改变内部Layer显示的高度，即可完成该效果显示。是不是很简单啊。。

2.3、实现代码

_dynamicView 表示外部轮廓的View。

indicateLayer 表示内容动态显示的Layer。

实现动态改变的函数如下：

1 2 3 4 5 6 7 8 9 10

-(void)refreshUIWithVoicePower : (NSInteger)voicePower{     CGFloat height = (voicePower)*(CGRectGetHeight(_dynamicView.frame)/TOTAL_NUM);     [_indicateLayer removeFromSuperlayer];     _indicateLayer = nil;     UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, CGRectGetHeight(_dynamicView.frame)-height, CGRectGetWidth(_dynamicView.frame), height) cornerRadius:0];     _indicateLayer = [CAShapeLayer layer];     _indicateLayer.path = path.CGPath;     _indicateLayer.fillColor = [UIColor whiteColor].CGColor;     [_dynamicView.layer addSublayer:_indicateLayer]; }

三、圆形进度条

3.1、案例演示

最近有一个小需求，就是要做一个圆形进度条，大概样子如下：

在不知道有CAShapeLayer的strokeStart和strokeEnd属性的时候，我采取的方法就是实时的 移除旧的CAShapeLayer 然后重绘这个圆形的CAShapeLayer。显然这种方式的效率是不高的。后来在一次看别人Demo的时候，发现别人使用了CAShapeLayer的strokeStart和strokeEnd属性，实现这一个效果十分的简单方便。下面就和大家来讲一讲这两个属性的使用。

3.2、属性详解

苹果官方给出这两个属性的解释为：

/* These values define the subregion of the path used to draw the

stroked outline. The values must be in the range [0,1] with zero

representing the start of the path and one the end. Values in

between zero and one are interpolated linearly along the path

length. strokeStart defaults to zero and strokeEnd to one. Both are

animatable. */

大概意思就是：我们可以对绘制的Path进行分区。这两个属性的值在0~1之间，0代表Path的开始位置，1代表Path的结束位置。是一种线性递增关系。strokeStart默认值为0，strokeEnd默认值为1。这两个属性都支持动画。

1 2 3 4 5 6 7 8 9 10

CAShapeLayer *shapeLayer = [CAShapeLayer layer]; shapeLayer.frame = _demoView.bounds; shapeLayer.strokeEnd = 0.7f; shapeLayer.strokeStart = 0.1f; UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:_demoView.bounds]; shapeLayer.path = path.CGPath; shapeLayer.fillColor = [UIColor clearColor].CGColor; shapeLayer.lineWidth = 2.0f; shapeLayer.strokeColor = [UIColor redColor].CGColor; [_demoView.layer addSublayer:shapeLayer];

我们通过以上代码设置：strokeStart=0.1f; strokeEnd=0.7f则显示如下图所示。

3.3、圆形进度条的实现代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

CAShapeLayer *shapeLayer = [CAShapeLayer layer]; shapeLayer.frame = _demoView.bounds; UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:_demoView.bounds]; shapeLayer.path = path.CGPath; shapeLayer.fillColor = [UIColor clearColor].CGColor; shapeLayer.lineWidth = 2.0f; shapeLayer.strokeColor = [UIColor redColor].CGColor; [_demoView.layer addSublayer:shapeLayer]; CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; pathAnima.duration = 3.0f; pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; pathAnima.fromValue = [NSNumber numberWithFloat:0.0f]; pathAnima.toValue = [NSNumber numberWithFloat:1.0f]; pathAnima.fillMode = kCAFillModeForwards; pathAnima.removedOnCompletion = NO; [shapeLayer addAnimation:pathAnima forKey:@"strokeEndAnimation"];