博客> iOS-给View加上带感的波浪
iOS-给View加上带感的波浪
2018-08-16 15:55 评论:0 阅读:648 Arron_Zhang
ios

效果图

在进行具体说明前先放上效果图给大家看看,代码和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;

自定义后的效果图如下:


到此,您已经掌握了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。 最后,本人学iOS时间不长, 还算初学者,如果觉得代码哪里有问题或想提点建议,欢迎随时勾搭我。 在此特别感谢WXWaveView的启发。

收藏
0
sina weixin mail 回到顶部