案例演示

• 对于实时显示语音音量大小的需求，发现很多人的实现方式通过预放置多张图进行切换进行完成的。这样的处理，不但会浪费App的资源存储空间，而且效率也不高。对于符合某一定规律动态改变的图形，我们也可以考虑通过代码的方式来实现

图一.gif

实现机制

图二.png

• 外部轮廓View主要控制显示大小和显示的圆角效果。内部的Layer主要控制动态显示的高度，虽然他是矩形的。但是当把该Layer加入到View中，而该View设置了_dynamicView.clipsToBounds = YES;。内部的Layer超过外部轮廓的部分，则会被切除掉。
  如此说来，我们只需要动态改变内部Layer显示的高度，即可完成该效果显示。是不是很简单啊。

实现代码

-(void)refreshUIWithVoicePower : (NSInteger)voicePower{
 CGFloat height = (voicePower)*(CGRectGetHeight(self.frame)/10);
    //每次进来清掉上一次的layer
    [_indicateLayer removeFromSuperlayer];
    _indicateLayer = nil;
    
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, CGRectGetHeight(self.frame)-height, CGRectGetWidth(self.frame), height) cornerRadius:0];
    
    CAShapeLayer *indicateLayer = [CAShapeLayer layer];
    indicateLayer.path = path.CGPath;
    indicateLayer.fillColor = [UIColor grayColor].CGColor;
    [self.layer addSublayer:indicateLayer];
    _indicateLayer = indicateLayer;
}

实现的简单效果

图三.gif

请看demo