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];
}