ios实现颜色渐变的几种方法
demo地址:https://github.com/xiaochaofeiyu/YSCAnimation
有用的话求个star,欢迎建议讨论。
1. CAGradientLayer实现渐变
CAGradientLayer是CALayer的一个特殊子类,用于生成颜色渐变的图层,使用较为方便,下面介绍下它的相关属性:
colors 渐变的颜色
locations 渐变颜色的分割点
startPoint&endPoint 颜色渐变的方向,范围在(0,0)与(1.0,1.0)之间,如(0,0)(1.0,0)代表水平方向渐变,(0,0)(0,1.0)代表竖直方向渐变
CAGradientLayer *gradientLayer = [CAGradientLayer layer];gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor yellowColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];gradientLayer.locations = @[@0.3, @0.5, @1.0];gradientLayer.startPoint = CGPointMake(0, 0);gradientLayer.endPoint = CGPointMake(1.0, 0);gradientLayer.frame = CGRectMake(0, 100, 300, 100);[self.view.layer addSublayer:gradientLayer];
CAGradientLayer实现渐变标间简单直观,但存在一定的局限性,比如无法自定义整个渐变区域的形状,如环形、曲线形的渐变。
2. Core Graphics相关方法实现渐变
iOS Core Graphics中有两个方法用于绘制渐变颜色,CGContextDrawLinearGradient可以用于生成线性渐变,CGContextDrawRadialGradient用于生成圆半径方向颜色渐变。函数可以自定义path,无论是什么形状都可以,原理都是用来做Clip,所以需要在CGContextClip函数前调用CGContextAddPath函数把CGPathRef加入到Context中。
另外一个需要注意的地方是渐变的方向,方向是由两个点控制的,点的单位就是坐标。因此需要正确从CGPathRef中找到正确的点,方法当然有很多种看具体实现,本例中,我就是简单得通过调用CGPathGetBoundingBox函数,返回CGPathRef的矩形区域,然后根据这个矩形取两个点,读者可以根据自行需求修改具体代码。
1-> 线性渐变
- (void)drawLinearGradient:(CGContextRef)contextpath:(CGPathRef)pathstartColor:(CGColorRef)startColorendColor:(CGColorRef)endColor {CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();CGFloat locations[] = { 0.0, 1.0 };NSArray *colors = @[(__bridge id) startColor, (__bridge id) endColor];CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations);CGRect pathRect = CGPathGetBoundingBox(path);//具体方向可根据需求修改CGPoint startPoint = CGPointMake(CGRectGetMinX(pathRect), CGRectGetMidY(pathRect));CGPoint endPoint = CGPointMake(CGRectGetMaxX(pathRect), CGRectGetMidY(pathRect));CGContextSaveGState(context);CGContextAddPath(context, path);CGContextClip(context);CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);CGContextRestoreGState(context);CGGradientRelease(gradient);CGColorSpaceRelease(colorSpace); }- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view.//创建CGContextRefUIGraphicsBeginImageContext(self.view.bounds.size);CGContextRef gc = UIGraphicsGetCurrentContext();//创建CGMutablePathRefCGMutablePathRef path = CGPathCreateMutable();//绘制PathCGRect rect = CGRectMake(0, 100, 300, 200);CGPathMoveToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMinY(rect));CGPathAddLineToPoint(path, NULL, CGRectGetMidX(rect), CGRectGetMaxY(rect));CGPathAddLineToPoint(path, NULL, CGRectGetWidth(rect), CGRectGetMaxY(rect));CGPathCloseSubpath(path);//绘制渐变[self drawLinearGradient:gc path:path startColor:[UIColor greenColor].CGColor endColor:[UIColor redColor].CGColor];//注意释放CGMutablePathRefCGPathRelease(path);//从Context中获取图像,并显示在界面上UIImage *img = UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();UIImageView *imgView = [[UIImageView alloc] initWithImage:img];[self.view addSubview:imgView]; }
2-> 圆半径方向渐变
- (void)drawRadialGradient:(CGContextRef)contextpath:(CGPathRef)pathstartColor:(CGColorRef)startColorendColor:(CGColorRef)endColor {CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();CGFloat locations[] = { 0.0, 1.0 };NSArray *colors = @[(__bridge id) startColor, (__bridge id) endColor];CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations);CGRect pathRect = CGPathGetBoundingBox(path);CGPoint center = CGPointMake(CGRectGetMidX(pathRect), CGRectGetMidY(pathRect));CGFloat radius = MAX(pathRect.size.width / 2.0, pathRect.size.height / 2.0) * sqrt(2);CGContextSaveGState(context);CGContextAddPath(context, path);CGContextEOClip(context);CGContextDrawRadialGradient(context, gradient, center, 0, center, radius, 0);CGContextRestoreGState(context);CGGradientRelease(gradient);CGColorSpaceRelease(colorSpace); }- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view.//创建CGContextRefUIGraphicsBeginImageContext(self.view.bounds.size);CGContextRef gc = UIGraphicsGetCurrentContext();//创建CGMutablePathRefCGMutablePathRef path = CGPathCreateMutable();//绘制PathCGRect rect = CGRectMake(0, 100, 300, 200);CGPathMoveToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMinY(rect));CGPathAddLineToPoint(path, NULL, CGRectGetMidX(rect), CGRectGetMaxY(rect));CGPathAddLineToPoint(path, NULL, CGRectGetWidth(rect), CGRectGetMaxY(rect));CGPathAddLineToPoint(path, NULL, CGRectGetWidth(rect), CGRectGetMinY(rect));CGPathCloseSubpath(path);//绘制渐变[self drawRadialGradient:gc path:path startColor:[UIColor greenColor].CGColor endColor:[UIColor redColor].CGColor];//注意释放CGMutablePathRefCGPathRelease(path);//从Context中获取图像,并显示在界面上UIImage *img = UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();UIImageView *imgView = [[UIImageView alloc] initWithImage:img];[self.view addSubview:imgView]; }
3. 以CAShapeLayer作为layer的mask属性
CALayer的mask属性可以作为遮罩让layer显示mask遮住(非透明)的部分;CAShapeLayer为CALayer的子类,通过path属性可以生成不同的形状,将CAShapeLayer对象用作layer的mask属性的话,就可以生成不同形状的图层。故生成颜色渐变有以下几个步骤:
生成一个imageView(也可以为layer),image的属性为颜色渐变的图片
生成一个CAShapeLayer对象,根据path属性指定所需的形状
将CAShapeLayer对象赋值给imageView的mask属性
- (void)viewDidLoad {[super viewDidLoad];[self.view addSubview:self.firstCircle];_firstCircle.frame = CGRectMake(0, 0, 200, 200);_firstCircle.center = CGPointMake(CGRectGetWidth(self.view.bounds) / 2.0, CGRectGetHeight(self.view.bounds) / 2.0);CGFloat firsCircleWidth = 5;self.firstCircleShapeLayer = [self generateShapeLayerWithLineWidth:firsCircleWidth];_firstCircleShapeLayer.path = [self generateBezierPathWithCenter:CGPointMake(100, 100) radius:100].CGPath;_firstCircle.layer.mask = _firstCircleShapeLayer; } - (CAShapeLayer *)generateShapeLayerWithLineWidth:(CGFloat)lineWidth {CAShapeLayer *waveline = [CAShapeLayer layer];waveline.lineCap = kCALineCapButt;waveline.lineJoin = kCALineJoinRound;waveline.strokeColor = [UIColor redColor].CGColor;waveline.fillColor = [[UIColor clearColor] CGColor];waveline.lineWidth = lineWidth;waveline.backgroundColor = [UIColor clearColor].CGColor;return waveline; }- (UIBezierPath *)generateBezierPathWithCenter:(CGPoint)center radius:(CGFloat)radius {UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:0 endAngle:2*M_PI clockwise:NO];return circlePath; }- (UIImageView *)firstCircle {if (!_firstCircle) {self.firstCircle = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"circleBackground"]];_firstCircle.layer.masksToBounds = YES;_firstCircle.alpha = 1.0;}return _firstCircle; }
demo地址:https://github.com/xiaochaofeiyu/YSCAnimation
在YSCNewVoiceWaveView与YSCVoiceLoadingCircleView中
ios实现颜色渐变的几种方法相关推荐
- css文字颜色渐变的3种实现
在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .g ...
- IOS中Json解析的四种方法
2019独角兽企业重金招聘Python工程师标准>>> 作为一种轻量级的数据交换格式,json正在逐步取代xml,成为网络数据的通用格式. 有的json代码格式比较混乱,可以使用此& ...
- 利用颜色和形态学两种方法进行车牌区域提取的OpenCV代码
图像处理开发需求.图像处理接私活挣零花钱,请加微信/QQ 2487872782 图像处理开发资料.图像处理技术交流请加QQ群,群号 271891601 2016-7-28日:用MSER算法也实现了车牌 ...
- 【转】IOS中Json解析的四种方法
原文网址:http://blog.csdn.net/enuola/article/details/7903632 作为一种轻量级的数据交换格式,json正在逐步取代xml,成为网络数据的通用格式. 有 ...
- php设置背景为透明,css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍...
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
- iOS CAGradientLayer颜色渐变
Gradient:本身就是梯度的意思,所以在这里就是作为渐变色来理解 CAGradientLayer用于处理渐变色的层结构 CAGradientLayer的渐变色可以做隐式动画 大部分情况下,CAGr ...
- iOS字体大小适配的几种方法
摘要:在iOS开发中,有些公司对字体也有适配要求,为了让字体美观,所以在不同尺寸的屏幕上字体大小也要做到适配. 自己总结了几种方法供大家参考. 方法一:用宏定义适配字体大小(根据屏幕尺寸判断) //宏 ...
- iOS 保存图片到手机的几种方法--(OC)
在使用前 请导入photos.framework 然后导入 1 #import #import #import 方法一 使用UIImageWriteToSavedPhotosAlbum函数将图片保存 ...
- css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
最新文章
- 4-2-串的堆存储结构-串-第4章-《数据结构》课本源码-严蔚敏吴伟民版
- 解决 java “错误:编码GBK 的不可映射字符”
- 支付宝移动支付文档url
- Angular route传参
- android安装apk时启动一个服务器,详解Android中App的启动界面Splash的编写方法
- 数据结构算法(二)_算法基础之前传(递归、时间复杂度、空间复杂度、二分查找)...
- linux opengl 实例,一篇文章入门Ubuntu的OpenGL开发
- AI理论知识整理(15)-行列式
- drf6 权限和频率控制组件
- android jni 字符串拼接,JNI 字符串拼接方法
- react native bundle读取assets_react-native-easy-app 详解与使用之 (一)AsyncStorage
- 网站生成静态页面,及网站数据采集的攻、防原理和策略
- STM32:位带操作分析
- javascript事件委托和jQuery事件绑定on、off 和one以及on绑定多个事件(重要)
- B2B电商平台--ChinaPay银联电子支付功能
- html滚动字幕怎么设置大小,视频画面顶部加一行滚动字幕设置字体大小颜色 滚动显示控制次数...
- 2021年大学生可以参加的科创竞赛-最全信息汇总
- GI 中新的基础架构 --MDNS, gipc 和 gpnp 是如何协同工作的
- ZigBee Dotdot
- [ app.json 文件内容错误] app.json: window.navigationBarTextStyle 字段需为 black,white【已解决】
热门文章
- samba共享服务的部署及安全优化
- 【单片机毕业设计】【mcuclub-109】基于单片机的智能抽油烟机控制系统设计-标准版【仿真设计】
- 回应张逸老师(一)圈子文化
- Oracle EBS AR_PAYMENT_SCHEDULES_ALL表整理
- hive的条件查询语句_Hive SQL 条件函数 IF 详解
- AIGC的未来展望和发展方向
- HTML简单又好用的几种颜色!
- 腾讯安全SOC+能力图谱正式发布,助力政企构建闭环安全运营体系
- linux下次登录强制更改密码,如何强制用户在Linux上的下次登录时更改密码
- 把一块钱换成1分2分5分的硬币,有多少种方法?