注：看了别人写的东西，自己动手操作了一遍，记录一下。前面写过一次类似二维码扫码界面的效果，跟这个类似。都是用同样的东西。
原文链接：http://www.jianshu.com/p/a1e88a277975
一、类似qq聊天的图片，图片有个角。
1.CALayer和UIView
我的理解就是两个都是图层，功能作用类似，各自的方法也比较像，可以把layer理解成view，layer是另外一个CA框架下的东西，view是UIKit框架下东西，看名字知道了。至于苹果为什么不把两个二合一，看过一篇文章，说是为了使用各个平台。有空再找找这个文章，写的很搞笑。
2.一般手机界面看到的都是view，view有个layer属性，可以操作layer。layer有个mask属性，英语意思就是面罩。所以人们看到的view其实是这个面罩。
为了让图片显示个角，view没什么处理的，只能动layer了。修改了面罩的形状，就达到了目的。
如图：
QQ20170727-151909.png
上面是原图，下面是修改后的，有了个角。
UIImageView *originalIMG = [[UIImageView alloc] initWithFrame:CGRectMake(20, 80, 60, 80)];
originalIMG.image = [UIImage imageNamed:@"1111"];
[self.view addSubview:originalIMG];
UIImageView *IMG = [[UIImageView alloc] initWithFrame:CGRectMake(20, 200, 60, 80)];
IMG.image = [UIImage imageNamed:@"1111"];
[self.view addSubview:IMG];
CGFloat imgWidth = IMG.frame.size.width;
CGFloat imgHeight = IMG.frame.size.height;
CGPoint point1 = CGPointMake(0, 0);
CGPoint point2 = CGPointMake(imgWidth-20, 0);
CGPoint point3 = CGPointMake(imgWidth-20, 30);
CGPoint point4 = CGPointMake(imgWidth, 30);
CGPoint point5 = CGPointMake(imgWidth-20, 50);
CGPoint point6 = CGPointMake(imgWidth-20, imgHeight);
CGPoint point7 = CGPointMake(0, imgHeight);
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:point1];
[path addLineToPoint:point2];
[path addLineToPoint:point3];
[path addLineToPoint:point4];
[path addLineToPoint:point5];
[path addLineToPoint:point6];
[path addLineToPoint:point7];
[path closePath];
CAShapeLayer *myLayer = [[CAShapeLayer alloc] init];
myLayer.path = path.CGPath;
myLayer.fillColor = [UIColor redColor].CGColor;
myLayer.lineWidth = 2;
myLayer.strokeColor = [UIColor greenColor].CGColor;
IMG.layer.mask = myLayer;
首先新建贝塞尔曲线，根据计算好的各个点，添加直线，最后闭合曲线。如图（别人的图）
QQ20170727-152029.png
然后新建CAShapeLayer。把刚才的曲线路径赋值给CAShapeLayer，最后修改view的layer的mask，面罩替换完了就显示出了想要的样子。
总结：CAShapeLayer是layer的子类，通常都是配合贝塞尔曲线一起工作。贝塞尔绘制路径，让后把路径给CAShapeLayer，CAShapeLayer就能显示了。和view道理一样，一个view要想显示，必定占据一定的尺寸frame，如果尺寸是0就看不到它了。同理CAShapeLayer要想显示必须有尺寸，这个路径其实就是它的尺寸。
二、类似显示声音大小的动画。
其实按那人说的思路，其实不用图片，新建一个view放上去也行，每次改变view的尺寸有可以达到这个目的。
这次试用新建layer的方式，也能达到目的。
1595403-35e7830c34c2fc48.gif
这个简单，就是一个CAShapeLayer，每次接受不同的数值，再重新对它赋值，显示。
QQ20170727-153239.png
我通过一个点击事件，传递一个随机数，模拟声音大小，把这个layer添加到外层view的layer上，就实现了这个效果。
三、最后一个就是圆形进度条。
那人的文章就写了这三中应用。我也抄了三个。
CAShapeLayer有个strokeStart和strokeEnd属性，stroke听说是画笔的意思，查了下词典没找到这个翻译。就当时画笔吧，好理解。我感觉stroke是这个layer的边框。因为可以设置宽度，类似boder，
前面说了CAShapeLayer需要显示在贝塞尔绘制的图形上。
贝塞尔已经画好了一个圆形，赋值了layer，这时候layer是个圆。所以这时候设置一下边框颜色，宽度，边框的开始位置strokeStart和结束位置strokeEnd就能显示了，再把layer的填充色设置成cleanColor就达到目的了。
CAShapeLayer *layer1 = [[CAShapeLayer alloc] init];
layer1.strokeStart = 0.4;
layer1.strokeEnd = 0.7;
layer1.fillColor = [UIColor blueColor].CGColor;
layer1.strokeColor = [UIColor redColor].CGColor;
layer1.lineWidth = 3;
UIBezierPath *path1 = [UIBezierPath bezierPathWithOvalInRect:emptyView.bounds];
layer1.path = path1.CGPath;
[emptyView.layer addSublayer:layer1];
效果如图：
QQ20170727-155616.png
进度条是能动的，所以需要添加动画。
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;
[layer1 addAnimation:pathAnima forKey:@"strokeEndAnimation"];
这个CABasicAnimation动画用的不多，平时都是UIView简单动画。看这写法，应该是监听了layer的一个属性，通过改变这个属性的值实现动画，感觉类似KVO。
网友评论