iOS 渐变色水波纹

因项目需求封装了一个带有渐变色水波视图，水波视图相信大家可以在网上搜到很多，但是绘制一个波浪是渐变色的，且背景也可以径向渐变的水波不多。

效果如如下：

水波纹.gif

实现以下功能：

支持自定义水波形状 (圆形和方形)
支持自定义背景渐变
支持自定义两层水波独立渐变色
支持波纹周期、速度、振幅等自定义

附上Github Demo:SYMoireView

☞☞☞觉得有用可以帮我star一下

1、CocoaPods集成

SYMoireView 目前已经支持CocoaPods，只要项目中有pod就可以很快通过pod导入进项目中直接使用。

SYMoireView 的安装，最简单的方法是使用CocoaPods，在Podfile里添加如下：

pod 'SYMoireView', '~> 1.0.0'

2、直接导入`.h`和`.m`文件

或者直接将SYMoireView.h和SYMoireView.m两个源文件直接拖进自己的项目工程中。文件位置在的Demo中

3、使用

导入头文件

1）cocoapods集成用 #import

导入.h和.m文件 #import "SYMoireView.h"

使用

  //默认圆形波浪
    CGFloat waveWidth = 160;
    SYMoireView *waveView = [[SYMoireView alloc]initWithFrame:CGRectMake(100, 100, waveWidth, waveWidth)];
    [self.view addSubview:waveView];
    waveView.clipsToBounds = YES;
    waveView.insideColors = @[(__bridge id)mHexColor(0x209b93).CGColor,(__bridge id)mHexColor(0x27a192).CGColor];//内层
    waveView.outsideColors = @[(__bridge id)mHexColor(0x3cb4a6).CGColor,(__bridge id)mHexColor(0x70cfac).CGColor];//外层
    waveView.percent = 0.7;
    waveView.isRound = YES;//是否是圆形
    waveView.waveAmplitude = 50;
    [waveView startWave];
    
    //自定义背景渐变-圆形波浪
    SYMoireView *customWave = [[SYMoireView alloc] initWithFrame:CGRectMake(10, 420, waveWidth, waveWidth)];
    [self.view addSubview:customWave];
    customWave.insideColors = @[(__bridge id)mHexColor(0x209b93).CGColor,(__bridge id)mHexColor(0x27a192).CGColor];//内层
    customWave.outsideColors = @[(__bridge id)mHexColor(0x3cb4a6).CGColor,(__bridge id)mHexColor(0x70cfac).CGColor];//外层
    customWave.percent = 0.4;
    customWave.delegate = self;
    [customWave startWave];
    
    
    //方形波浪
    SYMoireView *rectWave = [[SYMoireView alloc] initWithFrame:CGRectMake(200, 560, 140, 100)];
    [self.view addSubview:rectWave];
    rectWave.insideColors = @[(__bridge id)mHexColor(0x209b93).CGColor,(__bridge id)mHexColor(0x27a192).CGColor];//内层
    rectWave.outsideColors = @[(__bridge id)mHexColor(0x3cb4a6).CGColor,(__bridge id)mHexColor(0x70cfac).CGColor];//外层
    rectWave.percent = 0.7;
    rectWave.isRound = NO;
    rectWave.delegate = self;
    [rectWave startWave];

如果需要背景色自定义颜色渐变则需要遵循协议

rectWave.delegate = self;

实现协议

//自定义背景渐变
- (void)drawBgGradient:(SYMoireView *)waveView context:(CGContextRef)context
{
    CGColorSpaceRef colorSpace=CGColorSpaceCreateDeviceRGB();
    CGFloat compoents[8]={
        1.0,1.0,1.0,1.0,
        166/255.0,240/255.0,255.0/255.0,1
    };
    
    CGFloat locations[2]={0,0.7};
    CGGradientRef gradient= CGGradientCreateWithColorComponents(colorSpace, compoents, locations, 2);
    
    CGFloat width = CGRectGetWidth(waveView.frame);
    CGFloat height = CGRectGetHeight(waveView.frame);
    CGPoint center = CGPointMake(width/2, height/2);
    
    //    if (waveView == _rectWave) {
    //        //线性渐变
    //        CGContextDrawLinearGradient(context, gradient, CGPointMake(0, 0), CGPointMake(width, height), kCGGradientDrawsAfterEndLocation);
    //    } else {
    //径向渐变
    CGContextDrawRadialGradient(context, gradient, center,0, center, width/2, kCGGradientDrawsAfterEndLocation);
    //    }
    
    CGColorSpaceRelease(colorSpace);
    CGGradientRelease(gradient);
}

渐变水波已经集成到我们的项目中了，当然SYMoireView还提供了一系列的对外属性变量，使我们可以高度自定义水波，如下：

@property (nonatomic, assign) CGFloat percent;           // 百分比 (默认:0)
@property (nonatomic, assign) BOOL isRound;              // 圆形/方形 (默认:YES)
@property (nonatomic, assign) CGFloat waveAmplitude;     // 波纹振幅 (默认:0)
@property (nonatomic, assign) CGFloat waveCycle;         // 波纹周期 (默认:1.29 * M_PI / self.frame.size.width)
@property (nonatomic, assign) CGFloat waveSpeed;         // 波纹速度 (默认:0.2/M_PI)
@property (nonatomic, assign) CGFloat waveGrowth;        // 波纹上升速度 (默认:1.00)

@property (nonatomic, strong) NSArray *insideColors;     // 内层渐变的颜色数组 (有默认颜色)
@property (nonatomic, strong) NSArray *outsideColors;    // 外层渐变的颜色数组 (有默认颜色)

还提供了相关API方法控制水波纹

// 开始波浪
- (void)startWave;
// 停止波动
- (void)stopWave;
// 继续波动
- (void)goOnWave;
// 清空波浪
- (void)resetWave;

大家可能是把自己的代码上传到github public库中，没有构建自己的Cocoapods库，大家可以参考：

http://www.cnblogs.com/weiming4219/p/7699699.html
https://www.jianshu.com/p/950026d788bd

特别鸣谢:https://www.jianshu.com/p/fbf5a2ab00c1