CAShapeLayer实现音量大小动态改变

我是效果图

       实现如图这效果一般会直接通过多张图进行切换进行完成。但这样的处理，会浪费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];
}