iOS實現音訊進度條效果

這篇文章主要介紹了iOS實現音訊進度條效果,本文寫了一個小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];
}

總結
以上所述是小編給大家介紹的iOS實現音訊進度條效果，希望對大家有所幫助，同時歡迎大家進入小編交流群：624212887，一起交流學習，謝謝大家的支援