iOS-给View加上带感的波浪

效果图

在进行具体说明前先放上效果图给大家看看，代码和Demo都可以在github下载，有兴趣深入了解的朋友可以点击这个链接去下载。GitHub代码链接

KHWaveView的特点

• 体量小
• 使用极其简易
• 可进行简单的自定义

使用方法

1. 下载并复制KHWaveView文件夹下的源代码到你的工程目录。
2. 使用"addToSuperView: WithFrame:" 方法初始化
   KHWaveView

    KHWaveView *waveView = [KHWaveView addToSuperView:self.headerView WithFrame:CGRectMake(0, CGRectGetHeight(self.headerView.frame) - kWaveView_Height / 2 - 3, self.headerView.frame.size.width, kWaveView_Height)];

3. 调用"wave"方法来令KHWaveView波动起来

    [self.waveView wave];

4. 调用"stop"方法来令KHWaveView停止波动

    [self.waveView stop];

除此之外,你还可以进行简单的自定义!

1. 改变波纹的颜色

  self.waveView.waveColor = [UIColor yellowColor];

2. 改变波纹的波动速度

  self.waveView.waveSpeed = 15.f;

3. 改变波纹的波动时间(当"waveTime == 0"会一直波动,不会停下)

  self.waveView.waveTime = 0.f;

自定义后的效果图如下:

[图片上传失败...(image-d3e7b8-1528620448461)]
到此,您已经掌握了KHWaveView的全部使用方法

核心代码

• 要实现波浪效果，原理其实并不难。首先我们要明确以下几个条件：
  1. 使用高中学过的sin函数
  2. 使用CAShapeLayer这个类来绘图
  3. 使用CADisplayLink这个类来作为计时器
• 实现的步骤：
  1. 使用CADisplayLink绑定一个handleWave的方法，CADisplayLink会根据屏幕刷新率定时去调用这个方法。
  2. 在handleWave方法中，使用for循环绘制一条sin曲线 y = height * sin(0.01 * (self.angularSpeed * x + self.waveOffset))，并且每次定时器调用该方法时，实现self.waveOffset += self.waveSpeed，从而令每次绘制的sin函数都有变化（换言之就是令sin曲线进行左右的平移），搞不明白这个数学原理的话建议回去看高中数学先。
  3. 在handleWave方法中，将绘制出来的sin路径进行封闭 CGPathCloseSubpath(path)，并赋值给CAShapeLayer， self.shapeLayer.path = path，从而绘制出波浪来。
• 原理：从以上步骤不难看出，实现的逻辑很简单，使用定时器定时地去绘制一条新的sin曲线路径，每次绘制新的sin路径时都改变它的左右偏移量，并将sin路径赋值给CAShapeLayer，绘制出来，从而展现一条动感的波纹。

实现代码如下：

#pragma mark - 懒加载
- (CAShapeLayer *)shapeLayer{
    if (!_shapeLayer) {
        _shapeLayer = [CAShapeLayer layer];
        _shapeLayer.fillColor = self.waveColor.CGColor;
        [self.layer addSublayer:_shapeLayer];
    }
    return _shapeLayer;
}
- (CADisplayLink *)displayLink{
    if (!_displayLink) {
        _displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(handleWave)];
        [_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
    }
    return _displayLink;
}

#pragma mark - 实现波浪纹
- (void)handleWave{   
    self.waveOffset += self.waveSpeed;
    
    CGFloat width = CGRectGetWidth(self.frame);
    CGFloat height = CGRectGetHeight(self.frame);
    
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, 0, height / 2);

    CGFloat y = 0.f;
    for (CGFloat x = 0; x <= width; x++) {
        y = height * sin(0.01 * (self.angularSpeed * x + self.waveOffset));
        CGPathAddLineToPoint(path, NULL, x, y);
    }
    
    CGPathAddLineToPoint(path, NULL, width, height);
    CGPathAddLineToPoint(path, NULL, 0, height);
    CGPathCloseSubpath(path);
    self.shapeLayer.path = path;
    
    CGPathRelease(path);
}

结语

展示的代码只是一部分，有兴趣的朋友欢迎去我的github下载相应的代码和Demo。如果觉得好用不妨给我在GitHub上点个星星 :P。 最后，如果觉得代码哪里有问题或想提点建议，欢迎随时勾搭我。 在此特别感谢WXWaveView的启发。