這篇文章主要介紹了iOS實(shí)現(xiàn)音頻進(jìn)度條效果,本文寫了一個(gè)小demo通過實(shí)例代碼相結(jié)合的形式給大家詳細(xì)介紹蒙揣，需要的朋友可以參考下
話不多說先上效果圖
效果圖
看到這個(gè)效果的時(shí)候我感覺相對比較難的點(diǎn)有兩點(diǎn)：
一、是這個(gè)進(jìn)度條的進(jìn)度顏色變化梁肿，這里思路還是比較清晰的，直接用layer的mask來做就可以买窟。
二登渣、第二點(diǎn)就是這個(gè)各各條條的高度不一致又沒有規(guī)律可言摊求，在各個(gè)方法中我最終選擇用隨機(jī)數(shù)來做嘉抓。
??好了思路清晰了索守，那就開始擼代碼了。
首先創(chuàng)建一個(gè)View CYXAudioProgressView
@interface CYXAudioProgressView : UIView
//無動畫設(shè)置 進(jìn)度
@property (assign, nonatomic) CGFloat persentage;
//有動畫設(shè)置 進(jìn)度 0~1
-(void)setAnimationPersentage:(CGFloat)persentage;
/**
初始化layer 在完成frame賦值后調(diào)用一下
*/
-(void)initLayers;
@end
成員變量及初始化方法
/*條條間隙*/
#define kDrawMargin 4
#define kDrawLineWidth 8
/*差值*/
#define differenceValue 51
@interface CYXAudioProgressView ()<CAAnimationDelegate>
/*條條 灰色路徑*/
@property (nonatomic,strong) CAShapeLayer *shapeLayer;
/*背景黃色*/
@property (nonatomic,strong) CAShapeLayer *backColorLayer;
@property (nonatomic,strong) CAShapeLayer *maskLayer;
@end
@implementation CYXAudioProgressView
-(instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
self.backgroundColor = [UIColor blackColor];
[self.layer addSublayer:self.shapeLayer];
[self.layer addSublayer:self.backColorLayer];
self.persentage = 0.0;
}
return self;
}
畫圖方法：
/**
初始化layer 在完成frame賦值后調(diào)用一下
*/
-(void)initLayers{
[self initStrokeLayer];
[self setBackColorLayer];
}
繪制路徑
/*路徑*/
-(void)initStrokeLayer{
UIBezierPath *path = [UIBezierPath bezierPath];
CGFloat maxWidth = self.frame.size.width;
CGFloat drawHeight = self.frame.size.height;
CGFloat x = 0.0;
while (x+kDrawLineWidth<=maxWidth) {
CGFloat random =5+ arc4random()%differenceValue;//差值在1-50 之間取
NSLog(@"%f",random);
[path moveToPoint:CGPointMake(x-kDrawLineWidth/2, random)];
[path addLineToPoint:CGPointMake(x-kDrawLineWidth/2, drawHeight-random)];
x+=kDrawLineWidth;
x+=kDrawMargin;
}
self.shapeLayer.path = path.CGPath;
self.backColorLayer.path = path.CGPath;
}
設(shè)置mask來顯示黃色路徑
/*設(shè)置masklayer*/
-(void)setBackColorLayer{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, self.frame.size.height/2)];
[path addLineToPoint:CGPointMake(self.frame.size.width, self.frame.size.height/2)];
self.maskLayer.frame = self.bounds;
self.maskLayer.lineWidth = self.frame.size.width;
self.maskLayer.path= path.CGPath;
self.backColorLayer.mask = self.maskLayer;
}
手動設(shè)置百分比的兩個(gè)方法
-(void)setAnimationPersentage:(CGFloat)persentage{
CGFloat startPersentage = self.persentage;
[self setPersentage:persentage];
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 1;
pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
pathAnimation.fromValue = [NSNumber numberWithFloat:startPersentage];
pathAnimation.toValue = [NSNumber numberWithFloat:persentage];
pathAnimation.autoreverses = NO;
pathAnimation.delegate = self;
[self.maskLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
}
/**
* 在修改百分比的時(shí)候抑片，修改遮罩的大小
*
* @param persentage 百分比
*/
- (void)setPersentage:(CGFloat)persentage {
_persentage = persentage;
self.maskLayer.strokeEnd = persentage;
}
最終使用
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.view.backgroundColor = [UIColor whiteColor];
self.loopProgressView.frame =CGRectMake(0, 100, self.view.frame.size.width, 150);
[self.loopProgressView initLayers];
[self.view addSubview:self.loopProgressView];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[self.loopProgressView setAnimationPersentage:0.5];
});
self.slider.frame = CGRectMake(30, self.view.frame.size.height-60, self.view.frame.size.width-30*2, 20);
[self.view addSubview:self.slider];
}
總結(jié)
以上所述是小編給大家介紹的iOS實(shí)現(xiàn)音頻進(jìn)度條效果卵佛，希望對大家有所幫助，同時(shí)歡迎大家進(jìn)入小編交流群：624212887蓝丙，一起交流學(xué)習(xí)级遭，謝謝大家的支持
