本次文章,主要讲述的是图层中的mask属性,利用它,可以做出文字渐变效果!

一、文字渐变效果:

二、文字渐变实现思路:

1.创建一个颜色渐变层,渐变图层跟文字控件一样大。

2.用文字图层裁剪渐变层,只保留文字部分,就会让渐变层只保留有文字的部分,相当于间接让渐变层显示文字,我们看到的其实是被裁剪过后,渐变层的部分内容。

注意:如果用文字图层裁剪渐变层,文字图层就不在拥有显示功能,这个图层就被弄来裁剪了,不会显示,在下面代码中也会有说明。

2.1 创建一个带有文字的label,label能显示文字。

2.2 设置渐变图层的mask为label图层,就能用文字裁剪渐变图层了。

3.mask图层工作原理:

1.根据透明度进行裁剪,只保留非透明部分,显示底部内容。

4.详细代码+解释

// 创建UILabel

UILabel *label = [[YZLabel alloc] init];

label.text = @"小码哥,专注于高级iOS开发工程师的培养";

[label sizeToFit];

label.center = CGPointMake(, );

// 疑问:label只是用来做文字裁剪,能否不添加到view上。

// 必须要把Label添加到view上,如果不添加到view上,label的图层就不会调用drawRect方法绘制文字,也就没有文字裁剪了。

// 如何验证,自定义Label,重写drawRect方法,看是否调用,发现不添加上去,就不会调用

[self.view addSubview:label];

// 创建渐变层

CAGradientLayer *gradientLayer = [CAGradientLayer layer];

gradientLayer.frame = label.frame;

// 设置渐变层的颜色,随机颜色渐变

gradientLayer.colors = @[(id)[self randomColor].CGColor, (id)[self randomColor].CGColor,(id)[self randomColor].CGColor];

// 疑问:渐变层能不能加在label上

// 不能,mask原理:默认会显示mask层底部的内容,如果渐变层放在mask层上,就不会显示了

// 添加渐变层到控制器的view图层上

[self.view.layer addSublayer:gradientLayer];

// mask层工作原理:按照透明度裁剪,只保留非透明部分,文字就是非透明的,因此除了文字,其他都被裁剪掉,这样就只会显示文字下面渐变层的内容,相当于留了文字的区域,让渐变层去填充文字的颜色。

// 设置渐变层的裁剪层

gradientLayer.mask = label.layer;

// 注意:一旦把label层设置为mask层,label层就不能显示了,会直接从父层中移除,然后作为渐变层的mask层,且label层的父层会指向渐变层,这样做的目的:以渐变层为坐标系,方便计算裁剪区域,如果以其他层为坐标系,还需要做点的转换,需要把别的坐标系上的点,转换成自己坐标系上点,判断当前点在不在裁剪范围内,比较麻烦。

// 父层改了,坐标系也就改了,需要重新设置label的位置,才能正确的设置裁剪区域。

label.frame = gradientLayer.bounds;

// 利用定时器,快速的切换渐变颜色,就有文字颜色变化效果

CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(textColorChange)];

[link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

// 随机颜色方法

-(UIColor *)randomColor{

CGFloat r = arc4random_uniform() / 255.0;

CGFloat g = arc4random_uniform() / 255.0;

CGFloat b = arc4random_uniform() / 255.0;

];

}

// 定时器触发方法

-(void)textColorChange {

_gradientLayer.colors = @[(id)[self randomColor].CGColor,

(id)[self randomColor].CGColor,

(id)[self randomColor].CGColor,(id)[self randomColor].CGColor,

(id)[self randomColor].CGColor];}

linux 终端 渐变色,iOS开发——UI篇文字渐变效果:图层中的mask属性相关推荐

  1. iOS开发UI篇-在UItableview中实现加载更多功能

    iOS开发UI篇-在UItableview中实现加载更多功能 一.实现效果 点击加载更多按钮,出现一个加载图示,三秒钟后添加两条新的数据. 二.实现代码和说明 当在页面(视图部分)点击加载更多按钮的时 ...

  2. iOS开发UI篇—CAlayer(创建图层)

    一.添加一个图层 添加图层的步骤: 1.创建layer 2.设置layer的属性(设置了颜色,bounds才能显示出来) 3.将layer添加到界面上(控制器view的layer上)  1 // 2 ...

  3. iOS开发UI篇—UIWindow简单介绍

    iOS开发UI篇-UIWindow简单介绍 一.简单介绍 UIWindow是一种特殊的UIView,通常在一个app中只会有一个UIWindow iOS程序启动完毕后,创建的第一个视图控件就是UIWi ...

  4. iOS开发UI篇—简单介绍静态单元格的使用

    iOS开发UI篇-简单介绍静态单元格的使用 一.实现效果与说明 说明:观察上面的展示效果,可以发现整个界面是由一个tableview来展示的,上面的数据都是固定的,且几乎不会改变. 要完成上面的效果, ...

  5. iOS开发UI篇—UITableview控件使用小结

    iOS开发UI篇-UITableview控件使用小结 一.UITableview的使用步骤 UITableview的使用就只有简单的三个步骤: 1.告诉一共有多少组数据 方法:- (NSInteger ...

  6. iOS开发UI篇—Quartz2D简单使用(二)

    iOS开发UI篇-Quartz2D简单使用(二) 一.画文字 代码: // // YYtextview.m // 04-写文字 // // Created by 孔医己 on 14-6-10. // ...

  7. iOS开发UI篇—实现一个私人通讯录小应用(一)

    iOS开发UI篇-实现一个私人通讯录小应用(一) 一.该部分主要完成内容 1.界面搭建                        2.功能说明 (1).只有当账号和密码输入框都有值的时候,登录按钮 ...

  8. android tableview实现多选功能,iOS开发UI篇-tableView在编辑状态下的批量操作(多选)...

    先看下效果图 直接上代码 #import "MyController.h" @interface MyController () { UIButton *button; } @pr ...

  9. iOS开发UI篇—transframe属性(形变)

    iOS开发UI篇-transframe属性(形变) 1. transform属性 在OC中,通过transform属性可以修改对象的平移.缩放比例和旋转角度 常用的创建transform结构体方法分两 ...

最新文章

  1. SQL根据细粒度为天的查询
  2. php 获取数据库中的信息,php获取数据库中数据的实现方法
  3. 关于Unity中的帧动画组件的编写
  4. 将网络中的图片存为NSData并保存到sqlite的BLOB字段中
  5. 冒泡排序算法(C语言版)
  6. C#读取系统注册表信息
  7. 存储 - emmc ufs nvme
  8. 怎么把html变成桌面壁纸,新手必看,把静态壁纸变为动态壁纸怎么设置?
  9. python+twilio实现打电话和发短信功能
  10. redis cluster 集群 HA 原理和实操(史上最全、面试必备)
  11. 云南省增值税发票综合平台(修订版)----发票抵扣勾选教程---
  12. 爬虫眼中的“周庄”长什么样?
  13. AJAX学习笔记——发送AJAX的POST请求,模拟from表单提交
  14. 已有a,b两个链表,每个链表中的结点包括学号,成绩。要求把两个链表合并,按学号升序排列。
  15. 维护高 Star Github 项目,会遇到什么有趣的问题 2022 版
  16. IHERB上待产包准备指南-宝宝篇
  17. acrobat 打印PDF时错误:Error: typecheck; OffendingCommand: show
  18. java毕业生设计预约健身私教网站计算机源码+系统+mysql+调试部署+lw
  19. OpenCV图像修复函数inpaint()
  20. face_morpher

热门文章

  1. cocoa 坑爹的委托
  2. [置顶] 细说Cache
  3. Linux C SQLite3 编程
  4. Android网络连接异常处理方案
  5. Java 之 IO 异常的处理【了解】
  6. 解决IOS滑动页面fixed浮动问题
  7. Thinkphp5.1允许uni-app的H5跨域请求接口解决方法
  8. 解决ajax异步传输数据,return返回为undefined的问题
  9. vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题
  10. c#关于JWT跨域身份验证解决方案