前幾天開(kāi)發(fā)群里有一個(gè)老兄問(wèn)了一個(gè)開(kāi)發(fā)問(wèn)題,他們的需求是要做一個(gè)類似音頻進(jìn)度條的東西,我感覺(jué)設(shè)計(jì)還不錯(cuò),于是就寫了個(gè)小demo供大家參考,在爭(zhēng)得了他的同意的情況下寫下這篇文章。
話不多說(shuō)先上效果圖
看到這個(gè)效果的時(shí)候我感覺(jué)相對(duì)比較難的點(diǎn)有兩點(diǎn):
一、是這個(gè)進(jìn)度條的進(jìn)度顏色變化,這里思路還是比較清晰的,直接用layer的mask來(lái)做就可以。
二、第二點(diǎn)就是這個(gè)各各條條的高度不一致又沒(méi)有規(guī)律可言,在各個(gè)方法中我最終選擇用隨機(jī)數(shù)來(lái)做。
好了思路清晰了,那就開(kāi)始擼代碼了。
首先創(chuàng)建一個(gè)View CYXAudioProgressView
@interface CYXAudioProgressView : UIView//無(wú)動(dòng)畫設(shè)置 進(jìn)度@property (assign, nonatomic) CGFloat persentage;//有動(dòng)畫設(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來(lái)顯示黃色路徑
/*設(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;}手動(dòng)設(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ǎn)單的實(shí)現(xiàn)了上述效果,有問(wèn)題歡迎指教。
Demo: https://github.com/SionChen/CYXAudioProgressView
總結(jié)
以上所述是小編給大家介紹的iOS實(shí)現(xiàn)音頻進(jìn)度條效果,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)VEVB武林網(wǎng)網(wǎng)站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注