iOS- 音频进度条

栏目: IOS · 发布时间: 6年前

内容简介:前几天开发群里有一个老兄问了一个开发问题,他们的需求是要做一个类似音频进度条的东西,我感觉设计还不错,于是就写了个小demo供大家参考,在争得了他的同意的情况下写下这篇文章。话不多说先上效果图

前几天开发群里有一个老兄问了一个开发问题,他们的需求是要做一个类似音频进度条的东西,我感觉设计还不错,于是就写了个小demo供大家参考,在争得了他的同意的情况下写下这篇文章。

话不多说先上效果图

iOS- 音频进度条

QQ20180509-160255-HD.gif

看到这个效果的时候我感觉相对比较难的点有两点:

一、是这个进度条的进度颜色变化,这里思路还是比较清晰的,直接用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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web表单设计

Web表单设计

[美] Luke Wroblewski / 卢颐、高韵蓓 / 清华大学出版社 / 2010-6 / 49.00元

精心设计的表单,能让用户感到心情舒畅,愉快地注册、付款和进行内容创建和管理,这是促成网上商业成功的秘密武器。本书通过独到、深邃的见解,丰富、真实的实例,道出了表单设计的真谛。新手设计师通过阅读本书,可广泛接触到优秀表单设计的所有构成要素。经验丰富的资深设计师,可深入地了解以前没有注意到的问题及解决方案。 本书专为表单设计或开发人员准备,但同时也适合可用性工程师、网站开发人员、产品经理、视觉设......一起来看看 《Web表单设计》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试