一个渐变水波视图,水波视图相信大家已经司空见惯,但是最近视觉要求绘制一个波浪是渐变色的,且背景是径向渐变的水波,于是在原来的基础上做了相应改进。
先来看下效果图:
渐变水波
基本实现以下功能:
支持自定义水波形状
支持自定义背景渐变
支持自定义两层水波独立渐变色
支持波纹周期、速度、振幅等自定义
·····
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
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。