iOS实现音频进度条效果

这篇文章主要介绍了ios实现音频进度条效果,本文写了一个小demo通过实例代码相结合的形式给大家详细介绍，需要的朋友可以参考下

前几天开发群里有一个老兄问了一个开发问题，他们的需求是要做一个类似音频进度条的东西，我感觉设计还不错，于是就写了个小demo供大家参考，在争得了他的同意的情况下写下这篇文章。

话不多说先上效果图

iOS实现音频进度条效果

看到这个效果的时候我感觉相对比较难的点有两点：

一、是这个进度条的进度颜色变化，这里思路还是比较清晰的，直接用layer的mask来做就可以。

二、第二点就是这个各各条条的高度不一致又没有规律可言，在各个方法中我最终选择用随机数来做。

好了思路清晰了，那就开始撸代码了。

首先创建一个View CYXAudioProgressView

				?

									@interface CYXAudioProgressView : UIView

									//无动画设置 进度

									@property (assign, nonatomic) CGFloat persentage;

									//有动画设置 进度 0~1

									-(void)setAnimationPersentage:(CGFloat)persentage;

									/**

									 初始化layer 在完成frame赋值后调用一下

									 */

									-(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赋值后调用一下

									 */

									-(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;

									}

设置mask来显示黄色路径

				?

									/*设置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;

									}

手动设置百分比的两个方法

				?

									-(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"];

									}

									/**

									 * 在修改百分比的时候，修改遮罩的大小

									 *

									 * @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];

									}