iOS实现音频进度条效果
短信预约 -IT技能 免费直播动态提醒
前几天开发群里有一个老兄问了一个开发问题，他们的需求是要做一个类似音频进度条的东西，我感觉设计还不错，于是就写了个小demo供大家参考，在争得了他的同意的情况下写下这篇文章。
话不多说先上效果图
看到这个效果的时候我感觉相对比较难的点有两点：
一、是这个进度条的进度颜色变化，这里思路还是比较清晰的，直接用layer的mask来做就可以。
二、第二点就是这个各各条条的高度不一致又没有规律可言，在各个方法中我最终选择用随机数来做。
好了思路清晰了，那就开始撸代码了。
首先创建一个View CYXAudioProgressView
@interface CYXAudioProgressView : UIView
//无动画设置 进度
@property (assign, nonatomic) CGFloat persentage;
//有动画设置 进度 0~1
-(void)setAnimationPersentage:(CGFloat)persentage;
-(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;
}画图方法：
-(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来显示黄色路径
-(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"];
}
- (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实现音频进度条效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程网网站的支持！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
