iOS实现音频进度条效果

 更新时间:2018年10月16日 08:36:19   作者:yyuuzhu  
这篇文章主要介绍了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;
 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 Method Swizzling使用陷阱

    详解iOS Method Swizzling使用陷阱

    这篇文章主要介绍了详解iOS Method Swizzling使用陷阱,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • iOS缓存文件大小显示功能和一键清理功能的实现方法

    iOS缓存文件大小显示功能和一键清理功能的实现方法

    缓存占用了系统的大量空间,如何实时动态的显示缓存的大小,使用户清晰的了解缓存的积累情况,有效的进行一键清理呢?下面小编通过本文给大家介绍iOS缓存文件大小显示功能和一键清理功能的实现方法,一起看看吧
    2016-10-10
  • iOS中的UITextView文字输入光标使用技巧小结

    iOS中的UITextView文字输入光标使用技巧小结

    UITextView在用户体验方面有着十分明显的作用,包括键盘的呼出及文字的选择等,接下来就来整理给出一份iOS中的UITextView文字输入光标使用技巧小结,需要的朋友可以参考下
    2016-05-05
  • iOS UIView常见属性方法小结

    iOS UIView常见属性方法小结

    本文通过实例代码给大家详细介绍了iOS UIView常见属性方法,非常不错,需要的朋友参考下吧
    2016-12-12
  • iOS开发实现UIImageView的分类

    iOS开发实现UIImageView的分类

    这篇文章主要为大家详细介绍了iOS开发实现UIImageView的分类,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • iOS判断用户是否打开APP通知开关

    iOS判断用户是否打开APP通知开关

    这篇文章主要为大家详细介绍了iOS判断用户是否打开APP通知开关的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • iOS GCD之dispatch_group_enter和dispatch_group_leave使用

    iOS GCD之dispatch_group_enter和dispatch_group_leave使用

    这篇文章主要为大家介绍了iOS GCD之dispatch_group_enter和dispatch_group_leave使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • iOS10最新实现远程通知的开发教程详解

    iOS10最新实现远程通知的开发教程详解

    这篇文章主要介绍了iOS10最新远程通知开发的实现过程,文章先对推送通知以及远程推送通知等进行了基本介绍,然后通过示例代码详细介绍了iOS10 全新远程通知的教程,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-09-09
  • iOS中获取系统相册中的图片实例

    iOS中获取系统相册中的图片实例

    这篇文章主要介绍了iOS中获取系统相册中的图片实例,具有一定的参考价值没有需要的朋友可以了解一下。
    2016-11-11
  • iOS用UITextField切换明文/密文显示时末尾空白的问题解决

    iOS用UITextField切换明文/密文显示时末尾空白的问题解决

    最近在工作中遇到一个问题,利用UITextField切换明文/密文显示时发现字符串后面会出现一段空白,所以下面这篇文章主要给大家介绍了iOS用UITextField切换明文/密文显示时末尾空白问题的解决方法,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-05-05

最新评论