贝塞尔曲线收录：一关于CAShapeLayer的一些实用案例和技巧

最新推荐文章于 2022-04-16 12:03:44 发布

Lea__DongYang

最新推荐文章于 2022-04-16 12:03:44 发布

阅读量522

点赞数

分类专栏： iOS_OC

iOS_OC 专栏收录该内容

221 篇文章 1 订阅

订阅专栏

一，使用CAShapeLayer实现复杂的视图的遮罩效果

1.1，案例演示

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

演示图片

1.2，实现机制

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

这里写图片描述

1.3，实现代码

实现方式为实现了CAShapeLayer的ViewMask的范畴。

@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，案例演示

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

演示图片

2.2，实现机制

描述

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

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

2.3，实现代码

_dynamicView表示外部轮廓的视图。

表示内容动态显示的层。

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

-(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。显然这种方式的效率是不高的。后来在一次看别人演示的时候，发现别人使用了CAShapeLayer的strokeStart和strokeEnd属性，实现这一个效果十分的简单方便。下面就和大家来讲一讲这两个属性的使用。

3.2，属性详解

苹果官方给出这两个属性的解释为：
/ *这些值定义用于绘制的路径的子区域

抚摸大纲。值必须在0以内的范围[0,1]
代表路径的开始和结束。价值观
在零和一之间沿路径线性地内插
长度。strokeStart默认为零，strokeEnd为1。两者都是
动画。* /
大概意思就是：我们可以对绘制的路径进行分区这两个属性的值在0〜1之间，0代表当前位置的开始位置，1条代表路径的结束位置是一种线性递增关系.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://www.jianshu.com/p/a1e88a277975
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。