CAGradientLayer的使用

假期遇上台风天停电 休息了好几天。

今天大概说说CAGradientLayer的使用。

CAGradientLayer是用于处理渐变色的层结构,比如想设置一个背景色的一部分为蓝色,一部分为红色,这时候就可以使用CAGradientLayer来设置了。CAGradientLayer的渐变色和前面所使用的CALayer、CAShapeLayer一样都可以做隐式动画。CAGradientLayer与CAShapeLayer配合使用(CAShapeLayer上一篇有讲解了),CAShapeLayer提供一个形状,CAGradientLayer提供一个渐变色的背景。其实就是把CAShapeLayer当作CAGradientLayer的mask属性(遮罩)来使用了。CAGradientLayer可以实现png图片遮罩无法实现的效果,而且更效率。

另外,CAGradientLayer有一个坐标系统,是从(0,0)到(1,1)绘制的矩形,CAGradientLayer的frame不为正方形的话,坐标系统就会被拉伸。还有两个属性,startPoint和endPoint的设置会影响颜色的绘制方向,即从上到下或者从左到右等,由坐标系统决定。


坐标系统.png

画图还是那么差劲,能看懂就好 - -
比如startPoint是(0,0) endPoint是(0,1)则颜色的绘制方向由左到右。其他的类推。CAGradientLayer的多种颜色的分割由0->1的比例决定不由它的frame决定。


颜色分割点.png

代码部分

    @property (nonatomic, strong) CAGradientLayer *gradientLayer;

    //初始化
    self.gradientLayer = [CAGradientLayer layer];
    self.gradientLayer.frame = CGRectMake(0, 0, 200, 200);
    //laye的position和view的center一样 居中属性
    self.gradientLayer.position = self.view.center;
    //边宽
    self.gradientLayer.borderWidth = 1.f;
    [self.view.layer addSublayer:self.gradientLayer];

    //设置颜色
    self.gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                                  (__bridge id)[UIColor greenColor].CGColor,
                                  (__bridge id)[UIColor blueColor].CGColor];
    
    //设置颜色渐变方向 (0,0)->(1,1)则45度方向 (0,0)->(1,0)上->下
    self.gradientLayer.startPoint = CGPointMake(0, 0);
    self.gradientLayer.endPoint = CGPointMake(0, 1);
    
    //设置颜色分割点
    self.gradientLayer.locations = @[@(0.25),@(0.5),@(0.75)];

由于代码较多就不贴出来了,有需要下载的可以去http://www.code4app.com/thread-10691-1-1.html

下面是实现色差动画的效果

下面这些效果我都整理了 放在demo中了,可以去这里下载这里就不一一贴出来了,注释也写的比较多,很容易理解。
先放一张截图的吧。运行时的效果。因为视频转成gif后不知道为什么变成很差的效果,可能是帧数吧。代码中运行时还是很不错的效果的。。。有大神知道原因的告诉我一下感激不尽。


helloAda.png

色差实现,先设定渐变方向,再设置2种以上的颜色一种是透明的,另外一种就随意了。如果没有透明色,就会掩盖掉view,第三就是颜色分割点的值。注意:分割点的值和颜色的数量要匹配。
色差实现的效果

色差效果.gif

环形带间隔的进度条实现 或者全部饱满的也有,在代码中。


带间隔的进度条.gif

加载提示框


加载提示框.gif

后续还会继续更新一些其他的内容,如果觉得对你有用请点个喜欢吧。谢谢。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267

推荐阅读更多精彩内容