【iOS】渐变水波 YAWaveView
一个渐变水波视图，水波视图相信大家已经司空见惯，但是最近视觉要求绘制一个波浪是渐变色的，且背景是径向渐变的水波，于是在原来的基础上做了相应改进。
先来看下效果图：
渐变水波
基本实现以下功能：
支持自定义水波形状
支持自定义背景渐变
支持自定义两层水波独立渐变色
支持波纹周期、速度、振幅等自定义
·····
Demo见github YAWaveView，喜欢的话请star下_
使用说明
YAWaveView 目前已经支持CocoaPods，可以在很短的时间内被添加到任何工程中。
安装
YAWaveView 的安装，最简单的方法是使用CocoaPods，在PodFile里添加如下：
pod 'YAWaveView', '~> 0.0.1'
或者直接将YAWaveView.h和YAWaveView.m两个源文件直接拖进自己的项目工程中。
集成
首先导入头文件
#import "YAWaveView.h"
遵循相应协议
@interface ViewController () {
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]; //外 //默认圆形波浪 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];
实现相应协议
//自定义背景渐变
- (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);
}完成上述步骤，折线图控件已经集成到我们的项目中了，当然YAWaveView还提供了一系列的对外属性变量，使我们可以高度自定义水波，如下：
@property (nonatomic, assign) CGFloat percent; // 百分比 默认:0 @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, assign) BOOL isRound; // 圆形/方形 默认:YES @property (nonatomic, strong) NSArray *colors; // 渐变的颜色数组1 @property (nonatomic, strong) NSArray *sColors; // 渐变的颜色数组2 ····
另外还提供了相关API控制水波
// 开始波浪 - (void)startWave; // 停止波动 - (void)stopWave; // 继续波动 - (void)goOnWave; // 清空波浪 - (void)reset;
等等一系列，具体可参考YAWaveView.h
作者：Yaso
链接：http://www.jianshu.com/p/fbf5a2ab00c1
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
