Mac 音頻波形圖——播放

開篇

播放音頻的效果圖:

效果圖

需求分析

  1. 灰色波形底圖
  2. 播放過程,白色波形覆蓋

實現思路

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

1、波形的路徑計算與上篇類似

//波形路徑
    - (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實現,CAShapeLayer是唯一一個可動畫效果的圖層了

//添加播放動畫圖層
- (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;   //禁止動畫執行
    animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration = _playDuration;
    animation.fromValue = @(0.0f);
    animation.toValue = @(1.0f);
    animation.delegate = self;
    [animationLayer addAnimation:animation forKey:@""];
}

animationLayer.speed設為0,即動畫速度為0,也就是不執行。

@"strokeEnd"是路徑的結束點,始于0,止于1,當動畫開始執行,就能看到繪制過程了。

3、播放的開始、暫停、繼續、停止

對動畫的控制,主要是對speedtimeOffsetbeginTime等屬性的設置。

- (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;
    
    //動畫播放完成后,默認自動removed
    [animationLayer addAnimation:animation forKey:@""];
}

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

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,551評論 6 30
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,141評論 5 13
  • 筆記主要來源iOS核心動畫高級技巧,感謝作者與翻譯的各位同學. 一、圖層樹 UIView、NSView都有一個關聯...
    幸運的白鴿閱讀 3,538評論 0 3
  • >*時間和空間最大的區別在于,時間不能被復用* --弗斯特梅里克 在上面兩章中,我們探討了可以用`CAAnimat...
    夜空下最亮的亮點閱讀 242評論 0 0
  • 背景 后臺廣告系統匹配由串行轉為并行,涉及到并發數控制和一些資源回收工作,利用channel去做非常容易實現。細節...
    董澤潤閱讀 476評論 0 0