開(kāi)篇

播放音頻的效果圖：

效果圖

需求分析

1. 灰色波形底圖
2. 播放過(guò)程，白色波形覆蓋

實(shí)現(xiàn)思路

灰色波形底圖是固定的，可直接用圖層繪制

1、波形的路徑計(jì)算與上篇類似

//波形路徑
    - (CGPathRef)pathWithPoints:(NSArray *)points{
        CGFloat midY = NSHeight(self.bounds) / 2.f;
        CGFloat leftX = NSMaxX(playBtnRect);
        
        CGMutablePathRef wavePath = CGPathCreateMutable();                 //繪制路徑
        CGPathMoveToPoint(wavePath, nil, leftX, midY);
        for (NSInteger i = 0; i < _pointArray.count; i++) {
            NSValue *pointValue = _pointArray[i];
            NSPoint point = pointValue.pointValue;
            if (point.y == 0) {
                CGPathMoveToPoint(wavePath, nil, leftX + i - 1, midY);
                CGPathAddLineToPoint(wavePath, NULL, leftX + i, midY);
            }else{
                CGPathMoveToPoint(wavePath, nil, leftX + i, midY);
                CGPathAddLineToPoint(wavePath, NULL, leftX + i, midY + point.y);
                CGPathMoveToPoint(wavePath, nil, leftX + i, midY);
                CGPathAddLineToPoint(wavePath, NULL, leftX + i, midY - point.y);
            }
        }
        CGPathRef path = CGPathCreateCopy(wavePath);
        CGPathRelease(wavePath);
        return path;
    }

繪制灰色波形

//添加完整波形圖層
- (void)addWaveLayerWithPath:(CGPathRef)wavePath{
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.lineWidth=1;
    shapeLayer.strokeColor=[NSColor lightGrayColor].CGColor;
    shapeLayer.lineCap = kCALineCapRound;
    shapeLayer.lineJoin = kCALineJoinRound;
    [self.layer addSublayer:shapeLayer];
    shapeLayer.path = wavePath;
}

2、播放圖層，使用CAShapeLayer實(shí)現(xiàn)，CAShapeLayer是唯一一個(gè)可動(dòng)畫效果的圖層了

//添加播放動(dòng)畫圖層
- (void)addAnimationLayerWithPath:(CGPathRef)path{
    animationLayer = [CAShapeLayer layer];
    animationLayer.path = path;
    animationLayer.lineWidth = 1;
    animationLayer.strokeColor=[NSColor whiteColor].CGColor;
    animationLayer.lineCap = kCALineCapRound;
    animationLayer.lineJoin = kCALineJoinRound;
    [self.layer addSublayer:animationLayer];
    
    animationLayer.speed = 0;   //禁止動(dòng)畫執(zhí)行
    animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = _playDuration;
    animation.fromValue = @(0.0f);
    animation.toValue = @(1.0f);
    animation.delegate = self;
    [animationLayer addAnimation:animation forKey:@""];
}

animationLayer.speed設(shè)為0，即動(dòng)畫速度為0，也就是不執(zhí)行。

@"strokeEnd"是路徑的結(jié)束點(diǎn)，始于0，止于1，當(dāng)動(dòng)畫開(kāi)始執(zhí)行，就能看到繪制過(guò)程了。

3、播放的開(kāi)始、暫停、繼續(xù)、停止

對(duì)動(dòng)畫的控制，主要是對(duì)speed 、timeOffset、beginTime等屬性的設(shè)置。

- (void)play{
    [self resume];
}

- (void)pause{
    _playing = NO;
    [self setNeedsDisplay:YES];
    
    CFTimeInterval pausedTime = [animationLayer convertTime:CACurrentMediaTime() fromLayer:nil];
    animationLayer.speed = 0;
    animationLayer.timeOffset = pausedTime;
}

- (void)resume{
    _playing = YES;
    [self setNeedsDisplay:YES];
    
    CFTimeInterval pausedTime = [animationLayer timeOffset];
    animationLayer.speed = 1.0;
    animationLayer.timeOffset = 0.0;
    animationLayer.beginTime = 0;
    CFTimeInterval timeSincePause = [animationLayer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
    animationLayer.beginTime = timeSincePause;
}

- (void)stop{
    _playing = NO;
    [self setNeedsDisplay:YES];

    animationLayer.timeOffset = 0;
    animationLayer.speed = 0;
    
    //動(dòng)畫播放完成后，默認(rèn)自動(dòng)removed
    [animationLayer addAnimation:animation forKey:@""];
}

Demo 地址：https://github.com/YunFei2015/AudioWaveAnimation.git