IOS渐变图层CAGradientLayer
看支付宝蚂蚁积分,天气预报等好多APP都有圆形渐变效果,今天就试着玩了。
一.CAGradientLayer类中属性介绍
CAGradientLayer继承CALayer,主要有以下几个属性:
1.@property(nullable, copy) NSArray *colors; 渐变的颜色 这个数组中只设置一个颜色是不显示的
2.@property(nullable, copy) NSArray<NSNumber *> *locations;每种颜色的最亮的位置
3.@property CGPoint startPoint; @property CGPoint endPoint; 渐变的方向 左上(0,0) 右下(1,1) startPoint——>endPoint
4.@property(copy) NSString *type; 目前只有一种kCAGradientLayerAxial
通过设置上面的属性来看下效果
#import "ViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.frame = CGRectMake(, , , ); //设置颜色 [gradientLayer setColors:[NSArray arrayWithObjects:(id)[[UIColor greenColor] CGColor],(id)[[UIColor redColor] CGColor],(id)[[UIColor yellowColor] CGColor],(id)[[UIColor blueColor] CGColor],(id)[[UIColor redColor] CGColor], nil]]; //每种颜色最亮的位置 [gradientLayer setLocations:@[@,@]]; //渐变的方向StartPoint->EndPoint [gradientLayer setStartPoint:CGPointMake(, )]; [gradientLayer setEndPoint:CGPointMake(, )]; [self.view.layer addSublayer:gradientLayer]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end
二 .使用CAGradientLayer+UIBezierPath实现圆形渐变
1.自定义GredientLayerView
#import <UIKit/UIKit.h> @interface GredientLayerView : UIView @end
// // GredientLayerView.m // GredientLayerView // // Created by City--Online on 15/10/26. // Copyright © 2015年 City--Online. All rights reserved. // #import "GredientLayerView.h" #define degreesToRadians(x) (M_PI*(x)/180.0) //把角度转换成PI的方式 static const float kPROGRESS_LINE_WIDTH=4.0; @interface GredientLayerView () @property (nonatomic,strong) CAShapeLayer *progressLayer; @end @implementation GredientLayerView - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { //设置贝塞尔曲线 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width/, self.bounds.size.height/) radius:(frame.size.width-kPROGRESS_LINE_WIDTH)/ startAngle:degreesToRadians(-) endAngle:degreesToRadians() clockwise:YES]; //遮罩层 _progressLayer = [CAShapeLayer layer]; _progressLayer.frame = self.bounds; _progressLayer.fillColor = [[UIColor clearColor] CGColor]; _progressLayer.strokeColor=[UIColor redColor].CGColor; _progressLayer.lineCap = kCALineCapRound; _progressLayer.lineWidth = kPROGRESS_LINE_WIDTH; //渐变图层 CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.frame = _progressLayer.frame; [gradientLayer setColors:[NSArray arrayWithObjects:(id)[[UIColor redColor] CGColor],(id)[[UIColor yellowColor] CGColor],(id)[[UIColor blueColor] CGColor], nil]]; [gradientLayer setLocations:@[@,@]]; [gradientLayer setStartPoint:CGPointMake(, )]; [gradientLayer setEndPoint:CGPointMake(, )]; //用progressLayer来截取渐变层 遮罩 [gradientLayer setMask:_progressLayer]; [self.layer addSublayer:gradientLayer]; //增加动画 CABasicAnimation *pathAnimation=[CABasicAnimation animationWithKeyPath:@"strokeEnd"]; pathAnimation.duration = ; pathAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; pathAnimation.fromValue=[NSNumber numberWithFloat:0.0f]; pathAnimation.toValue=[NSNumber numberWithFloat:1.0f]; pathAnimation.autoreverses=NO; _progressLayer.path=path.CGPath; [_progressLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"]; } return self; } @end
2.调用
// // ViewController.m // Gredientlayer // // Created by City--Online on 15/10/26. // Copyright © 2015年 City--Online. All rights reserved. // #import "ViewController.h" #import "GredientLayerView.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; GredientLayerView *gredientLayerView=[[GredientLayerView alloc]initWithFrame:CGRectMake(, , , )]; [self.view addSubview:gredientLayerView]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end
3.效果
关于遮罩层的定义请参考百度百科:http://baike.baidu.com/view/1140860.htm
遮罩层必须至少有两个图层,上面的一个图层为“遮罩层”,下面的称“被遮罩层”;这两个图层中只有相重叠的地方才会被显示。也就是说在遮罩层中有对象的地方就是“透明”的,可以看到被遮罩层中的对象,而没有对象的地方就是不透明的,被遮罩层中相应位置的对象是看不见的。
它的原理是:上面一层是遮罩层,下面一层是被遮罩层。遮罩层上的图,自己是不显示的。它只起到一个透光的作用。假定遮罩层上是一个正圆,那么光线就会透过这个圆形,射到下面的被遮罩层上,只会显示一个圆形的图形。如果遮罩层上什么都没有,那么光线就无法透到下面来,那么下面的被遮罩层什么也显示不出来。
之前一直疑惑当设置遮罩后,遮罩层并不显示自身的样式,例如我设置了遮罩层的strokeColor为红色时,显示的是被遮罩层,当设置为透明时被遮罩层也不显示了,具体透明是什么样的一个原理,暂且还没弄明白,这里根据上面的遮罩层的原理就认为设置透明则就是上面的什么都没有
IOS渐变图层CAGradientLayer的更多相关文章
- IOS 创建渐变图层
代码如下 typedef enum { GradientLayerKindLeftRight = , GradientLayerKindUpDown, GradientLayerKindLBRT,// ...
- 给某个view增加颜色渐变图层
//给某个view增加颜色透明度渐变图层 - (void) insertTransparentGradient { NSLog(@"%@",NSStringFromCGRect(s ...
- cocos2dx中的背景图层CCLayerColor和渐变图层CCLayerGradient
1.CCLayerColor是专门用来处理背景颜色的图层,它继承自CCLayer,可以用来设置图层的背景颜色,因为CCLayer默认是透明色的,即无颜色的 2.CCLayerGradient是用来显示 ...
- iOS 渐变进度条
#import <UIKit/UIKit.h> @interface JianBianView : UIView //为了增加一个表示进度条的进行,可们可以使用mask属性来屏蔽一部分 @ ...
- iOS开发——图层OC篇&Quartz 2D各种绘制实例
Quartz 2D各种绘制实例 首先说一下,本篇文章只是介绍怎么使用Quartz 2D绘制一些常用的图像效果,关于Quartz和其他相关技术请查看笔者之前写的完整版(Quartz 2D详解) 一:画线 ...
- iOS开发——图层OC篇&UIColor深入研究(CGColor,CIColor)
UIColor深入研究(CGColor,CIColor) 由于跟人比较喜欢研究关于图层与动画方面的技术,正打算看看别人写的好东西,就遇到了好几个问题, 第一:UIClor类方法的使用 就是关于UICo ...
- iOS渐变视图&动画库、腰杆、音频水滴水波手势、多种对话框、四级展开效果等源码
iOS精选源码 用户行为追踪--无侵入埋点 .终端日志的打印 支持storyboard的渐变视图&动画库 支持圆形.竖直.横向的摇杆 纯swift实现的类似excel表格效果 swift实现自 ...
- 【iOS开发-图层】自己定义图层的两种方式
想要自己定义图层,仅仅须要构建一个类继承CALayer方法 假设让自己定义图层初始化上面就有画好的图形.有两种办法 重写drawInContext方法 自己定义的图层以下的方法.然后必须自己定义的图层 ...
- iOS 渐变提示。错误弹出提示 几秒自动消失
//事例 CGRect alertFarm = CGRectMake(,,,); [self noticeAlert:_bgView withNoticeStr:@"登录成功" w ...
随机推荐
- angular 响应式表单指令
响应式表单都是以 form开头的指令 第一列指令(不以name结尾)在html模版中,用 [ ] 第二列指令(以name结尾)在html模版中,不用 [ ]
- Django博客项目思路整理
首先明确一点,我目前学习Django是为了做一个博客,那么以博客为目标进行实践的话,按照Django的MTV模型的顺序来思考的话,要考虑如下几个事情: (Models) 1.在博客里的各种数据模型: ...
- AJPFX平台介绍
AJPFX设立于英国,业务框架扩展到欧洲.美洲和亚洲,在新加坡设有专门的亚洲地区服务部门.AJPFX旨在以极具竞争力的交易成本,也就是银行间市场核心点差和低水平的手续费,使客户在交易中获取最大的利润空 ...
- 【Oracle 12c】CUUG OCP认证071考试原题解析(29)
29.choose the best answer Evaluate the following query: SQL> SELECT promo_name || q'{'s start dat ...
- js正则包含三位
var reg = new RegExp("^(?![A-Za-z]+$)(?![A-Z\\d]+$)(?![A-Z_\\W]+$)(?![a-z\\d]+$)(?![a-z_\\W]+$) ...
- 前端传给后端的数据类型为ImmutableMultiDict 咋办
https://segmentfault.com/q/1010000002802028 偷得人家的答案 以下是解决办法:::: -------------------------------- ...
- ElasticSearch.net NEST批量创建修改删除索引完整示例
本示例采用Elasticsearch+Nest 网上查了很多资料,发现用C#调用Elasticsearch搜索引擎的功能代码很分散,功能不完整,多半是非常简单的操作,没有成型的应用示例.比如新增或修改 ...
- 爬虫7:selenium
1. 一个简单的使用例子 from selenium import webdriver from selenium.webdriver.common.by import By from seleniu ...
- Jsp入门实战上
前面讲了servlet入门实践现在开始介绍jsp入门实践,开发环境的搭建请参考我前面的tomcat的文章,jsp入门教程分为上下两部分,第一部分简单讲解:jsp语法的规范,以及三大编译指令,七个动作指 ...
- python 爬虫入门之爬小说
##第一步 导包from bs4 import BeautifulSoupimport requestsimport sys ##准备class downloder(object): def __in ...