网吧媒体,又名海城站长网,女性创业指南
前几天开发群里有一个老兄问了一个开发问题，他们的需求是要做一个类似音频进度条的东西，我感觉设计还不错，于是就写了个小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;
}
画图方法：
/**
初始化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实现音频进度条效果，希望对大家有所帮助
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
iOS 使用UITextField自定义搜索框 实现用户输入完之后“实时搜索”功能
网友评论