iOS 绘制波浪

wave.gif

视频录制是效果看起来挺好的，转成GIF后播放就不流畅了。不过不影响。

先展示一下引用波浪控件的代码吧

//波浪 - 底部
    _waveView = [[WaveView alloc] initWithFrame:CGRectMake(0,    self.view.frame.size.height - 98, self.view.frame.size.width, 98)];
    [_waveView showWaveNum:3 OffsetK:10 AngularSpeed:1.5*M_PI/self.view.frame.size.width Amplitude:20 WaveColor:0x6273FF];
    [self.view addSubview:_waveView];

再来展示一下上面调用的函数方法以及其参数的含义

/**
 绘制波浪

 @param waveNum 波浪个数
 @param offsetK 偏距 k
 @param angularSpeed 角速度 ω
 @param amplitude 振幅
 @param colorHex 波浪颜色
 */
-(void)showWaveNum:(NSInteger)waveNum OffsetK:(CGFloat)offsetK AngularSpeed:(CGFloat)angularSpeed Amplitude:(CGFloat)amplitude WaveColor:(int)colorHex{
    _waveNum = waveNum;
    _offsetK = offsetK;
    _angularSpeed = angularSpeed;
    _amplitude = amplitude;
    
    self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(drawWaveAnimation)];
    [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
    
    UIColor *color = UIColorFromRGBA(colorHex, 1.0);
    
    NSMutableArray *mArray = [[NSMutableArray alloc] initWithCapacity:1];
    
    for (int i = 0; i < _waveNum; i ++) {
        
        WaveModel *waveModel = [[WaveModel alloc] init];
        waveModel.waveSpeed = (i+1)/80.0;
        waveModel.waveLayer = [self customWaveLayerWithColor:color opacity:i /5.0 + 0.5];
        [mArray addObject:waveModel];
    }
    self.waveModels = [mArray copy];
}

至于波浪的绘制

- (CAShapeLayer *)customWaveLayerWithColor:(UIColor *)color opacity:(CGFloat)opacity{
    
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = [color CGColor];
    shapeLayer.fillColor = [color CGColor];
    shapeLayer.lineCap = kCALineCapSquare;
    shapeLayer.lineJoin = kCALineJoinBevel;
    shapeLayer.lineWidth = 1.0;
    shapeLayer.opacity = opacity;
    [self.layer addSublayer:shapeLayer];
    return shapeLayer;
}

绘制完图形后还要让其动起来才能在视觉上展示波浪，绘制一个波浪时只能看到波形平移，只有绘制多个波形后，通过不同的移速展现出波浪跌幅。

- (void)drawWaveAnimation {
    
    for (WaveModel *waveModel  in self.waveModels) {
        
        waveModel.offsetX -= waveModel.waveSpeed;
        [self drawWaveLineWithShapeLaye:waveModel.waveLayer initialPhase:50  offsetX:waveModel.offsetX ];
    }
}

- (void)drawWaveLineWithShapeLaye:(CAShapeLayer *)layer  initialPhase:(CGFloat)initialPhase offsetX:(CGFloat)offsetX {
    
    //路径
    UIBezierPath * linePath = [[UIBezierPath alloc] init];
    
    for (int x = 0; x <= self.frame.size.width; x ++) {
        /*
         公式  y=Asin(ωx+φ)+k
         */
        //CGFloat yValue = self.frame.size.height - _amplitude * sin(_angularSpeed * x + initialPhase + offsetX) - _offsetK - _amplitude;
        CGFloat yValue =  _amplitude * sin(_angularSpeed * x + initialPhase + offsetX) + _amplitude;
        CGPoint point = CGPointMake(x, yValue);
        if (x == 0) {
            
            [linePath moveToPoint:point];
            
        }else {
            
            [linePath addLineToPoint:point];
        }
    }
    
    [linePath addLineToPoint:CGPointMake(self.frame.size.width, self.frame.size.height)];
    [linePath addLineToPoint:CGPointMake(0, self.frame.size.height)];
    [linePath closePath];
    
    //创建layer
    layer.path = linePath.CGPath;
    
    //直接添加导视图上
    
    //    //绘制动画
//    CABasicAnimation *waveAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
//    waveAnimation.repeatCount = HUGE_VALF;
//    waveAnimation.fromValue = @(0);
//    waveAnimation.toValue = @(1);
//    waveAnimation.duration = drawAnimaTime;
//    waveAnimation.fillMode = kCAFillModeForwards;
//    [lineLayer addAnimation:waveAnimation forKey:@"waveAnimation"];
}

demo代码放这里了，需要的小伙伴可以自行下载

https://github.com/ITHanYong/WaveView.git