关于CAShapeLayer的一些实用案例和技巧
来源：景铭巴巴
链接：http://www.jianshu.com/p/a1e88a277975
一、使用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。
@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、调用方式
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。
实现动态改变的函数如下：
-(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。这两个属性都支持动画。
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、圆形进度条的实现代码
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"];
四、联系方式
新浪微博:http://weibo.com/5612984599/info
github:https://github.com/yixiangboy
简书首页:http://www.jianshu.com/users/c3c893a27097/timeline
欢迎加好友、一起交流。