OC-类似歌词字体颜色逐字变化的实现方法
预期实效果图如下:

如上图所示,文字的颜色会根据时间的移动,逐字变成绿色。
实现方法:
(1)调用方法:
用 void UIRectFillUsingBlendMode(CGRect rect, CGBlendMode blendMode) 这个方法来实现
(2)实现逻辑:
自定义Label,通过label的drawRect:方法 获取Label的图形上下文,使用调用UIRectFillUsingBlendMode:混合填充的方式来实现label颜色的绘制
(3)代码实现:
创建自定义的label:
.h 和.m的文件如下:
----------------.h--------------------
#import <UIKit/UIKit.h> NS_ASSUME_NONNULL_BEGIN @interface YALabel : UILabel @property (nonatomic, assign) CGFloat progress ; @end ----------------.m-------------------- #import "YALabel.h" @implementation YALabel - (void)drawRect:(CGRect)rect { [super drawRect:rect]; [[UIColor greenColor] set]; // 填充
// 这个rect的x、y、width、height 可根据自己的需求设置
rect = CGRectMake(rect.size.width *self.progress - 20, rect.origin.y, 40, rect.size.height); UIRectFillUsingBlendMode(rect, kCGBlendModeSourceIn);
} - (void)setProgress:(CGFloat)progress {
_progress = progress;
[self setNeedsDisplay];
}
调用:
#import "ViewController.h"
#import "YALabel.h"
@interface ViewController ()
@property (nonatomic,strong) YALabel * yaLabl ;
@property (nonatomic,assign) CGFloat progress ;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.yaLabl = [[YALabel alloc] initWithFrame:CGRectMake(10, 100, self.view.frame.size.width - 20, 30)];
self.yaLabl.text = @"叶绿不同赏,叶黄不同悲;若问相思处,叶绿叶黄时~~~~~~~";
self.yaLabl.textColor = [UIColor blackColor];
self.yaLabl.font = [UIFont systemFontOfSize:18];
[self.view addSubview:self.yaLabl];
[NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(update) userInfo:nil repeats:YES];
self.progress = 0.0;
}
- (void)update {
if (self.progress >= 1.0) {
self.progress = 0.0;
}
self.progress += 0.01;
self.yaLabl.progress = self.progress;
}
(4)注意事项:
label不能设置背景色,如果设置了背景色,那么这个绘制的方式,是给label的背景色绘制,而不是给label的文字绘制颜色;
下图是我添加了label的背景色后的效果:

(5)CGBlandMode参数为一个枚举类型,以及 每个枚举值的计算公式,提供一个参考链接,有兴趣就看看:
https://www.jianshu.com/p/96cfd3697b21
OC-类似歌词字体颜色逐字变化的实现方法的更多相关文章
- android spinner 每行字体颜色都变化
final static int[] COLOR_LIST={Color.WHITE,Color.WHITE,Color.GRAY,Color.YELLOW,Color.RED}; spinner=( ...
- <input />文字方框中,字体颜色的变化 要求默认的字体颜色是灰色,当要输入字时,字体是正常的黑色
<input type="text" name="address" size="60" maxlength="60" ...
- input文字方框中,字体颜色的变化 要求默认的字体颜色是灰色,当要输入字时,字体是正常的黑色
1 <input type=text name='address' size=60 maxlength=60 style="color:gray" value="( ...
- iOS开发--QQ音乐练习,歌词的展示,歌词的滚动,歌词的颜色变化
一.歌词的展示 -- 首先歌词是在scrollView上,scrollView的大小是两个屏幕的宽度 scrollView滚动修改透明度的代码 ...
- Android 字体颜色变化(点击)
在开发的过程中,经常会遇到这样的场景,点击按钮,背景颜色发生变化:在drawable中,定义xxx.xml(selector) <selector xmlns:android="htt ...
- android自定义控件实现TextView按下后字体颜色改变
今天跟大家分享一下Android自定义控件入门,先介绍一个简单的效果TextView,按下改变字体颜色,后期慢慢扩展更强大的功能 直接看图片 第一张是按下后截的图,功能很简单, ...
- 【JavaScript】轻易改变的背景和字体颜色页面
JavaScript,点击button改变页面背景和字体颜色,网页有N颜色的变化button.点击不同button,网页字体和背景将被改变为不同的颜色. 非常easy的JavaScript小程序. 一 ...
- [转载]Linux下终端字体颜色设置方法
原文地址:Linux下终端字体颜色设置方法作者:router 网上类似的文章有很多,但是都是转来转去的,没有经过测试,按照很多文章的方法会造成你设置之后的终端在换行和删除输入字符时终端显示会乱七八糟, ...
- Android 改变字体颜色的三种方法
在TextView中添加文本时有时需要改变一些文本字体的颜色,今天学到了三种方法,拿出来分享一下 1.在layout文件下的配置xml文件中直接设置字体颜色,通过添加android:textc ...
随机推荐
- JS Math对象、日期对象、函数、定时器
Math对象 开平方:sqrt 绝对值:abs π:PI x的y次方:pow 四舍五入取整:round 向下取整:floor 向上取整:ceil 最大值:max 最小值: min 随机数:random ...
- 升鲜宝V2.0_生鲜配送管理系统_杭州生鲜配送行业,升鲜宝使用教程 客户管理 第二章
1.新增客户 (1)新增客户有两种方式,单个添加和批量添加,客户的结构可以是独立的,也可以是父子结构(比如杭州升鲜宝科技有限公司下有西湖区部门,滨江区部门,余杭区部门等多个分部,就可以建立父子结构,这 ...
- Dynamics 365 Portal Onpremise缓存问题
最近被Dynamics 365 Portal的缓存问题折腾得不轻,Portal的配置进行缓存也就算了,连CRM中的记录也进行了长达15分钟到2小时的缓存,这是完全无法接受的 试想,我们有一个Porta ...
- 4.Android-adt安卓打包过程、adb指令学习
本章学习adt安卓打包过程.adb指令学习.并通过adb将打包的APK发给设备 1.打包 在eclipse中已经帮我们实现打包了. 具体打包流程如下: 最终一个APK包含了如下: classes.de ...
- 百度大脑EdgeBoard计算卡基于Resnet50/Mobile-SSD模型的性能评测
ResNet模型 前言在上一次的测试中,我们从头开始训练了一个三个卷积层串联一个全连接层的输出,作为猫狗分类的预测的模型,这次我们自己训练一个ResNet模型,并在以下三个环境中进行性能的对比 AIS ...
- Linux_crontab参数表示的意思
* * * * * (下面的字体对应) 分 时 日 月 周 星号(*):代表所有可能的值,例如month字段如果是星号,则表示在满 ...
- Hive初步认识,理解Hive(一)
Hive初步认识,理解Hive(一) 用了有一段时间的Hive了,之前一直以为hive是个数据库,类似Mysql.Oracle等数据库一样,其实不然. Hive是实现Hadoop 的MapReduce ...
- TSC打印机防重码在线检测系统
条码标签作为产品的一个身份标识,被应用得越来越普及,但随着使用量的增大,在打印条码流水号的过程中,偶尔会出现打印重复号码的标签出现,这样对产品生产及管理过程中会产生极大的混乱,会收到严重的客诉及返工, ...
- SpringBoot中使用Zuul
Zuul提供了服务网关的功能,可以实现负载均衡.反向代理.动态路由.请求转发等功能.Zuul大部分功能是通过过滤器实现的,除了标准的四种过滤器类型,还支持自定义过滤器. 使用@EnableZuulPr ...
- 3、netty第二个例子,使用netty建立客户端,与服务端通讯
第一个例子中,建立了http的服务器端,可以直接使用curl命令,或者浏览器直接访问. 在第二个例子中,建立一个netty的客户端来主动发送请求,模拟浏览器发送请求. 这里先启动服务端,再启动客户端, ...