一個(gè)漸變水波視圖，水波視圖相信大家已經(jīng)司空見(jiàn)慣国瓮，但是最近視覺(jué)要求繪制一個(gè)波浪是漸變色的灭必，且背景是徑向漸變的水波，于是在原來(lái)的基礎(chǔ)上做了相應(yīng)改進(jìn)乃摹。
先來(lái)看下效果圖：
漸變水波
基本實(shí)現(xiàn)以下功能：
- 支持自定義水波形狀
- 支持自定義背景漸變
- 支持自定義兩層水波獨(dú)立漸變色
- 支持波紋周期禁漓、速度、振幅等自定義
·····
Demo見(jiàn)github YAWaveView孵睬，喜歡的話請(qǐng)star下_
使用說(shuō)明
YAWaveView 目前已經(jīng)支持CocoaPods播歼，可以在很短的時(shí)間內(nèi)被添加到任何工程中。
安裝
YAWaveView 的安裝肪康，最簡(jiǎn)單的方法是使用CocoaPods荚恶，在PodFile里添加如下：
pod 'YAWaveView', '~> 0.0.1'
或者直接將YAWaveView.h和YAWaveView.m兩個(gè)源文件直接拖進(jìn)自己的項(xiàng)目工程中撩穿。
集成
- 首先導(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;
- 開(kāi)始繪制
[_wave startWave];
[_rectWave startWave];
- 實(shí)現(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)集成到我們的項(xiàng)目中了，當(dāng)然YAWaveView還提供了一系列的對(duì)外屬性變量食寡，使我們可以高度自定義水波雾狈，如下：
@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控制水波
// 開(kāi)始波浪
- (void)startWave;
// 停止波動(dòng)
- (void)stopWave;
// 繼續(xù)波動(dòng)
- (void)goOnWave;
// 清空波浪
- (void)reset;
等等一系列，具體可參考YAWaveView.h
