iOS 基于CAShapeLayer以及UIBezierPath的语音输入效果动画封装

先看效果图

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

接下来开始分析动画：

1. 都包含一个小话筒
2. 小话筒可以是实心的或者飞实心
3. 包含标题
4. 都有一个半透明的灰色背景

小话筒 作者这里把话筒看成了4、5个部分。

1. 一个圆角长方形的边框 （通过设置 fillColor 和 strokeColor）
2. 一个圆角长方形的矩形 （通过设置 fillColor 和 strokeColor，这里只有在是第一种动画效果的时候才需要设置）
3. 一个圆弧
4. 一个连接圆弧的小圆角矩形 （垂直方向）
5. 一个小圆角矩形（水平方向）
   通过以上的设置，我们的小话筒就创建出来了。

部分代码：
- (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一下，多谢。