前几天开发群里有一个老兄问了一个开发问题，他们的需求是要做一个类似音频进度条的东西，我感觉设计还不错，于是就写了个小demo供大家参考，在争得了他的同意的情况下写下这篇文章。
话不多说先上效果图
看到这个效果的时候我感觉相对比较难的点有两点：
一、是这个进度条的进度颜色变化，这里思路还是比较清晰的，直接用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;
}
