CAShapeLayer实现音量大小动态改变

我是效果图.gif

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