一個漸變水波視圖，水波視圖相信大家已經(jīng)司空見慣，但是最近視覺要求繪制一個波浪是漸變色的，且背景是徑向漸變的水波，于是在原來的基礎(chǔ)上做了相應(yīng)改進。
先來看下效果圖：
漸變水波
基本實現(xiàn)以下功能：
- 支持自定義水波形狀
- 支持自定義背景漸變
- 支持自定義兩層水波獨立漸變色
- 支持波紋周期、速度、振幅等自定義
·····
Demo見github YAWaveView，喜歡的話請star下_
使用說明
YAWaveView 目前已經(jīng)支持CocoaPods，可以在很短的時間內(nèi)被添加到任何工程中。
安裝
YAWaveView 的安裝，最簡單的方法是使用CocoaPods，在PodFile里添加如下：
pod 'YAWaveView', '~> 0.0.1'
或者直接將YAWaveView.h和YAWaveView.m兩個源文件直接拖進自己的項目工程中。
集成
- 首先導(dǎo)入頭文件
#import "YAWaveView.h"
- 遵循相應(yīng)協(xié)議
@interface ViewController () <YAWaveViewDelegate> {
YAWaveView *_wave;
YAWaveView *_rectWave;
}
- 初始化
NSArray *colors = @[(__bridge id)[UIColor colorWithRed:134/255.0 green:208/255.0 blue:248/255.0 alpha:0.75].CGColor, (__bridge id)[UIColor whiteColor].CGColor]; //里
NSArray *sColors = @[(__bridge id)[UIColor colorWithRed:166/255.0 green:240/255.0 blue:255/255.0 alpha:0.5].CGColor, (__bridge id)[UIColor colorWithRed:240/255.0 green:250/255.0 blue:255/255.0 alpha:0.5].CGColor]; //外
//默認(rèn)圓形波浪
CGFloat waveWidth = 160;
_wave = [[YAWaveView alloc]initWithFrame:CGRectMake(100, 100, waveWidth, waveWidth)];
[self.view addSubview:_wave];
_wave.layer.cornerRadius = waveWidth/2;
_wave.clipsToBounds = YES;
_wave.colors = colors;
_wave.sColors = sColors;
_wave.percent = 0.7;
//方形波浪
_rectWave = [[YAWaveView alloc]initWithFrame:CGRectMake(200, 560, 140, 100)];
[self.view addSubview:_rectWave];
_rectWave.colors = colors;
_rectWave.sColors = sColors;
_rectWave.percent = 0.7;
_rectWave.delegate = self;
- 開始繪制
[_wave startWave];
[_rectWave startWave];
- 實現(xiàn)相應(yīng)協(xié)議
//自定義背景漸變
- (void)drawBgGradient:(YAWaveView *)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);
}
完成上述步驟，漸變水波已經(jīng)集成到我們的項目中了，當(dāng)然YAWaveView還提供了一系列的對外屬性變量，使我們可以高度自定義水波，如下：
@property (nonatomic, assign) CGFloat percent; // 百分比 默認(rèn):0
@property (nonatomic, assign) CGFloat waveAmplitude; // 波紋振幅 默認(rèn):0
@property (nonatomic, assign) CGFloat waveCycle; // 波紋周期 默認(rèn):1.29 * M_PI / self.frame.size.width
@property (nonatomic, assign) CGFloat waveSpeed; // 波紋速度 默認(rèn):0.2/M_PI
@property (nonatomic, assign) CGFloat waveGrowth; // 波紋上升速度 默認(rèn):1.00
@property (nonatomic, assign) BOOL isRound; // 圓形/方形 默認(rèn):YES
@property (nonatomic, strong) NSArray *colors; // 漸變的顏色數(shù)組1
@property (nonatomic, strong) NSArray *sColors; // 漸變的顏色數(shù)組2
····
另外還提供了相關(guān)API控制水波
// 開始波浪
- (void)startWave;
// 停止波動
- (void)stopWave;
// 繼續(xù)波動
- (void)goOnWave;
// 清空波浪
- (void)reset;
等等一系列，具體可參考YAWaveView.h
