关于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。

@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"];

四、联系方式

新浪微博
github
首页

欢迎加好友、一起交流。