linux 终端 渐变色,iOS开发——UI篇文字渐变效果:图层中的mask属性
本次文章,主要讲述的是图层中的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属性相关推荐
- iOS开发UI篇-在UItableview中实现加载更多功能
iOS开发UI篇-在UItableview中实现加载更多功能 一.实现效果 点击加载更多按钮,出现一个加载图示,三秒钟后添加两条新的数据. 二.实现代码和说明 当在页面(视图部分)点击加载更多按钮的时 ...
- iOS开发UI篇—CAlayer(创建图层)
一.添加一个图层 添加图层的步骤: 1.创建layer 2.设置layer的属性(设置了颜色,bounds才能显示出来) 3.将layer添加到界面上(控制器view的layer上) 1 // 2 ...
- iOS开发UI篇—UIWindow简单介绍
iOS开发UI篇-UIWindow简单介绍 一.简单介绍 UIWindow是一种特殊的UIView,通常在一个app中只会有一个UIWindow iOS程序启动完毕后,创建的第一个视图控件就是UIWi ...
- iOS开发UI篇—简单介绍静态单元格的使用
iOS开发UI篇-简单介绍静态单元格的使用 一.实现效果与说明 说明:观察上面的展示效果,可以发现整个界面是由一个tableview来展示的,上面的数据都是固定的,且几乎不会改变. 要完成上面的效果, ...
- iOS开发UI篇—UITableview控件使用小结
iOS开发UI篇-UITableview控件使用小结 一.UITableview的使用步骤 UITableview的使用就只有简单的三个步骤: 1.告诉一共有多少组数据 方法:- (NSInteger ...
- iOS开发UI篇—Quartz2D简单使用(二)
iOS开发UI篇-Quartz2D简单使用(二) 一.画文字 代码: // // YYtextview.m // 04-写文字 // // Created by 孔医己 on 14-6-10. // ...
- iOS开发UI篇—实现一个私人通讯录小应用(一)
iOS开发UI篇-实现一个私人通讯录小应用(一) 一.该部分主要完成内容 1.界面搭建 2.功能说明 (1).只有当账号和密码输入框都有值的时候,登录按钮 ...
- android tableview实现多选功能,iOS开发UI篇-tableView在编辑状态下的批量操作(多选)...
先看下效果图 直接上代码 #import "MyController.h" @interface MyController () { UIButton *button; } @pr ...
- iOS开发UI篇—transframe属性(形变)
iOS开发UI篇-transframe属性(形变) 1. transform属性 在OC中,通过transform属性可以修改对象的平移.缩放比例和旋转角度 常用的创建transform结构体方法分两 ...
最新文章
- SQL根据细粒度为天的查询
- php 获取数据库中的信息,php获取数据库中数据的实现方法
- 关于Unity中的帧动画组件的编写
- 将网络中的图片存为NSData并保存到sqlite的BLOB字段中
- 冒泡排序算法(C语言版)
- C#读取系统注册表信息
- 存储 - emmc ufs nvme
- 怎么把html变成桌面壁纸,新手必看,把静态壁纸变为动态壁纸怎么设置?
- python+twilio实现打电话和发短信功能
- redis cluster 集群 HA 原理和实操(史上最全、面试必备)
- 云南省增值税发票综合平台(修订版)----发票抵扣勾选教程---
- 爬虫眼中的“周庄”长什么样?
- AJAX学习笔记——发送AJAX的POST请求,模拟from表单提交
- 已有a,b两个链表,每个链表中的结点包括学号,成绩。要求把两个链表合并,按学号升序排列。
- 维护高 Star Github 项目,会遇到什么有趣的问题 2022 版
- IHERB上待产包准备指南-宝宝篇
- acrobat 打印PDF时错误:Error: typecheck; OffendingCommand: show
- java毕业生设计预约健身私教网站计算机源码+系统+mysql+调试部署+lw
- OpenCV图像修复函数inpaint()
- face_morpher