快捷導(dǎo)航

iOS實(shí)現(xiàn)音頻進(jìn)度條效果

更新時(shí)間：2018年10月16日 08:36:19 作者：yyuuzhu

這篇文章主要介紹了ios實(shí)現(xiàn)音頻進(jìn)度條效果,本文寫了一個(gè)小demo通過(guò)實(shí)例代碼相結(jié)合的形式給大家詳細(xì)介紹，需要的朋友可以參考下

前幾天開發(fā)群里有一個(gè)老兄問(wèn)了一個(gè)開發(fā)問(wèn)題，他們的需求是要做一個(gè)類似音頻進(jìn)度條的東西，我感覺設(shè)計(jì)還不錯(cuò)，于是就寫了個(gè)小demo供大家參考，在爭(zhēng)得了他的同意的情況下寫下這篇文章。

話不多說(shuō)先上效果圖

看到這個(gè)效果的時(shí)候我感覺相對(duì)比較難的點(diǎn)有兩點(diǎn)：

一、是這個(gè)進(jìn)度條的進(jìn)度顏色變化，這里思路還是比較清晰的，直接用layer的mask來(lái)做就可以。

二、第二點(diǎn)就是這個(gè)各各條條的高度不一致又沒有規(guī)律可言，在各個(gè)方法中我最終選擇用隨機(jī)數(shù)來(lá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ì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: