iOS 基于CAShapeLayer以及UIBezierPath
2016-07-19 本文已影响1582人
Codepgq
先看效果图
voiceinput.gif
要想完成上面显示的效果要用到CAShapeLayer以及UIBezierPath一起完成。
那就先来了解一下什么是CAShapeLayer和UIBeizerPath：
-
CAShapeLayer：CAShapeLayer顾名思义，继承于CALayer。 每个CAShapeLayer对象都代表着将要被渲染到屏幕上的一个任意的形状(shape)。具体的形状由其path(类型为CGPathRef)属性指定。 普通的CALayer是矩形，所以需要frame属性。CAShapeLayer初始化时也需要指定frame值，但它本身没有形状，它的形状来源于其属性path 。CAShapeLayer有不同于CALayer的属性，它从CALayer继承而来的属性在绘制时是不起作用的。
-
UIBeizerPath：UIBezierPath是在 UIKit 中的一个类，继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC封装。使用此类可以定义常见的圆形、多边形等形状 。我们使用直线、弧（arc）来创建复杂的曲线形状。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。
关于CAShapeLayer的一些基本属性可以参考：http://blog.csdn.net/yongyinmg/article/details/38755955
关于UIBezierPath的一些基本方法：
- + (instancetype)bezierPathWithRect:(CGRect)rect;
矩形
- +(instancetype)bezierPathWithOvalInRect:(CGRect)rect;
创建圆形或者椭圆形
- +(instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;
圆角矩形
- +(instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
圆弧
更多的方法和介绍可以参考 http://justsee.iteye.com/blog/1972853
接下来开始分析动画：
- 都包含一个小话筒
- 小话筒可以是实心的或者飞实心
- 包含标题
- 都有一个半透明的灰色背景
小话筒 作者这里把话筒看成了4、5个部分。
- 一个圆角长方形的边框 （通过设置 fillColor 和 strokeColor）
- 一个圆角长方形的矩形 （通过设置 fillColor 和 strokeColor，这里只有在是第一种动画效果的时候才需要设置）
- 一个圆弧
- 一个连接圆弧的小圆角矩形 （垂直方向）
- 一个小圆角矩形（水平方向）
通过以上的设置，我们的小话筒就创建出来了。
部分代码：
- (CAShapeLayer*)drawOutSideLine:(CGRect)frame color:(UIColor*)color isFill:(BOOL)fill {
CAShapeLayer * Layer = [CAShapeLayer new];
if (fill) {
Layer.fillColor = color.CGColor;
Layer.strokeColor = nil;
}
else{
Layer.fillColor = nil; //这个是填充颜色
Layer.strokeColor = color.CGColor; //这个边框颜色
}
Layer.frame = frame; //这个是大小
Layer.lineWidth = self.lineWidth; //这个是线宽
Layer.lineCap = kCALineCapRound; //线条拐角
//这个就是画图
Layer.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, frame.size.width, frame.size.height) cornerRadius:frame.size.width*0.4].CGPath;
return Layer;
}
参数1：大小
参数2：颜色
参数3：是不是填充色
通过上述方法就可以完成对话筒最上面的部分进行绘制
对于第一种动画效果，如何进行更新：作者是这样子处理的，如果有更好的方法，欢迎提建议。
- (void)updateVoiceViewWithVolume:(float)volume{
CGFloat height = self.colidView.height;
CGFloat newHeight = height*volume;
CGFloat width = self.colidView.width;
self.colidLayer.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, height - newHeight , width , newHeight) cornerRadius:0].CGPath;
}
通过得到现在的高度，在把要显示的高度计算出来
在通过修改y的坐标以及修改现在要显示的高度。
这样子虽然可以完成效果，但是每次都需要重新绘制。
- (void)setUp{
self.circleLayer = [CAShapeLayer new];
self.circleLayer.lineWidth = self.lineWidth*0.5;
self.circleLayer.fillColor = nil;
self.circleLayer.strokeColor = self.lineColor.CGColor;
self.circleLayer.frame = self.bounds;
self.circleLayer.lineCap = kCALineCapRound;
self.circleLayer.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.width/2, self.height/2) radius:self.width*self.size startAngle:PQ_RADIANS(0) endAngle:PQ_RADIANS(360) clockwise:YES].CGPath;
[self.layer addSublayer:self.circleLayer];
}
因为多处使用到shapeLayer绘制圆，所以作者就封装了一个只用于画圆的类，
通过上述方法可以创建一个圆形边框，当然也只需要修改一下 fillColor，马上就可以变成一个实心圆。
- (void)createLayerWayTwo:(float)duration{
__block PQVoiceCircleView *circleView = [[PQVoiceCircleView alloc]initWithFrame:self.bounds lineWidth:self.lineWidth lindeColor:self.lineColor size:0.5];
[self addSubview:circleView];
[UIView animateWithDuration:duration delay:0 options:(UIViewAnimationOptionCurveLinear | UIViewAnimationOptionAllowUserInteraction) animations:^{
circleView.layer.transform = CATransform3DMakeScale(1.5, 1.5, 1.5);
circleView.layer.opacity = 0;
} completion:^(BOOL finished) {
[circleView removeFromSuperview];
}];
}
这里是第二种动画的处理代码，肯定也有改进的空间，希望大家斧正。
简单的来说就是通过传入的时间的长短，是圆弧慢慢往外扩张，并且同时慢慢变得透明。
第三种动画则是通过创建5个颜色是灰色的小圆弧，在创建5个根据用户输入的颜色的小圆弧，先把圆弧隐藏。通过用户传入的值 0.0 - 1.0 在自行进行判断显示到哪一级。由于代码简单且没什么技术可言，就不贴了
- demo网址https://github.com/codepgq/PQVoiceInputView.git
喜欢的希望可以star一下，多谢。
