我是效果图

       实现如图这效果一般会直接通过多张图进行切换进行完成。但这样的处理，会浪费App的资源存储空间，而且效率也不高。那么今天我们用CAShapeLayer实现以下吧。

 拆分:

1.一个椭圆2.一个矩形, 控制高度实现动画效果3.一个圆弧4.横线和竖线

 

添加图层和视图

CAShapeLayer *_shapeLayer2; // 矩形图层UIView *_dynamicView; // 放置椭圆外框的视图

 

实现代码

- (void)voiceAnimation{UIView *backView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 145)];backView.backgroundColor = [UIColor grayColor];backView.center = self.view.center;[self.view addSubview:backView];// 外部轮廓View_dynamicView = [[UIView alloc] initWithFrame:CGRectMake(85, 30, 30, 60)];_dynamicView.layer.cornerRadius = 15;_dynamicView.layer.masksToBounds = YES;_dynamicView.clipsToBounds = YES;[backView addSubview:_dynamicView];// 添加椭圆CAShapeLayer *shapeLayer = [CAShapeLayer layer];UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:_dynamicView.bounds cornerRadius:15];shapeLayer.path = path.CGPath;shapeLayer.strokeColor = [UIColor whiteColor].CGColor;shapeLayer.fillColor = [UIColor clearColor].CGColor;shapeLayer.lineWidth = 3.0f;[_dynamicView.layer addSublayer:shapeLayer];// 添加矩形CGFloat height = 30;_shapeLayer2 = [CAShapeLayer layer];UIBezierPath *path2 = [UIBezierPath bezierPathWithRect:CGRectMake(0, 60 - height, 30, height)];_shapeLayer2.path = path2.CGPath;_shapeLayer2.fillColor = [UIColor whiteColor].CGColor;[_dynamicView.layer addSublayer:_shapeLayer2];// 添加圆弧CAShapeLayer *shapeLayer3 = [CAShapeLayer layer];shapeLayer3.frame = backView.bounds;UIBezierPath *path3 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(70, 35, 60, 65)];shapeLayer3.path = path3.CGPath;shapeLayer3.strokeStart = 0.00f;shapeLayer3.strokeEnd = 0.50f;shapeLayer3.fillColor = [UIColor clearColor].CGColor;shapeLayer3.lineWidth = 5.0f;shapeLayer3.strokeColor = [UIColor whiteColor].CGColor;[backView.layer addSublayer:shapeLayer3];// 添加竖线CAShapeLayer *shapeLayer4 = [CAShapeLayer layer];shapeLayer4.frame = backView.bounds;UIBezierPath *path4 = [UIBezierPath bezierPath];[path4 moveToPoint:CGPointMake(100, 100)];[path4 addLineToPoint:CGPointMake(100, 115)];shapeLayer4.path = path4.CGPath;shapeLayer4.lineWidth = 5.0f;shapeLayer4.strokeColor = [UIColor whiteColor].CGColor;[backView.layer addSublayer:shapeLayer4];// 画横线CAShapeLayer *shapeLayer5 = [CAShapeLayer layer];shapeLayer5.frame = backView.bounds;UIBezierPath *path5 = [UIBezierPath bezierPath];[path5 moveToPoint:CGPointMake(85, 115)];[path5 addLineToPoint:CGPointMake(115, 115)];shapeLayer5.path = path5.CGPath;shapeLayer5.lineWidth = 5.0f;shapeLayer5.strokeColor = [UIColor whiteColor].CGColor;[backView.layer addSublayer:shapeLayer5];}

 

改变大小的代码

- (void)refreshUIWithVoicePower:(CGFloat)voicePower{NSLog(@"%f", voicePower);[_shapeLayer2 removeFromSuperlayer];_shapeLayer2 = nil;// 添加矩形CGFloat height = 60 * voicePower;_shapeLayer2 = [CAShapeLayer layer];UIBezierPath *path2 = [UIBezierPath bezierPathWithRect:CGRectMake(0, 60 - height, 30, height)];_shapeLayer2.path = path2.CGPath;_shapeLayer2.fillColor = [UIColor whiteColor].CGColor;[_dynamicView.layer addSublayer:_shapeLayer2];}