因項目需求封裝了一個帶有漸變色水波視圖，水波視圖相信大家可以在網上搜到很多，但是繪制一個波浪是漸變色的，且背景也可以徑向漸變的水波不多。
效果如如下：
水波紋.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
http://www.lxweimin.com/p/950026d788bd
