因项目需求封装了一个带有渐变色水波视图，水波视图相信大家可以在网上搜到很多，但是绘制一个波浪是渐变色的，且背景也可以径向渐变的水波不多。
效果如如下：
水波纹.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 <SYMoireView.h>
- 导入.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;
<SYMoireViewDelegate>
- 实现协议
//自定义背景渐变
- (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
//www.greatytc.com/p/950026d788bd
