iOS实现音频进度条效果
8 浏览量
2020-08-26
22:16:13
上传
评论 1
收藏 60KB PDF 举报
iOS实现音频进度条效果实现音频进度条效果
主要介绍了ios实现音频进度条效果,本文写了一个小demo通过实例代码相结合的形式给大家详细介绍，需要的
朋友可以参考下
前几天开发群里有一个老兄问了一个开发问题，他们的需求是要做一个类似音频进度条的东西，我感觉设计还不错，于是就写
了个小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;
评论0
最新资源