扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
前几天开发群里有一个老兄问了一个开发问题,他们的需求是要做一个类似音频进度条的东西,我感觉设计还不错,于是就写了个小demo供大家参考,在争得了他的同意的情况下写下这篇文章。
十载的邗江网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整邗江建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联公司从事“邗江网站设计”,“邗江网站推广”以来,每个客户项目都认真落实执行。
话不多说先上效果图
看到这个效果的时候我感觉相对比较难的点有两点:
一、是这个进度条的进度颜色变化,这里思路还是比较清晰的,直接用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 ()/*条条 灰色路径*/ @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]; }
以上就简单的实现了上述效果,有问题欢迎指教。
Demo: https://github.com/SionChen/CYXAudioProgressView
总结
以上所述是小编给大家介绍的iOS实现音频进度条效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流