预期实效果图如下:

如上图所示,文字的颜色会根据时间的移动,逐字变成绿色。

实现方法:
(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-类似歌词字体颜色逐字变化的实现方法的更多相关文章

  1. android spinner 每行字体颜色都变化

    final static int[] COLOR_LIST={Color.WHITE,Color.WHITE,Color.GRAY,Color.YELLOW,Color.RED}; spinner=( ...

  2. <input />文字方框中,字体颜色的变化 要求默认的字体颜色是灰色,当要输入字时,字体是正常的黑色

    <input type="text" name="address" size="60" maxlength="60" ...

  3. input文字方框中,字体颜色的变化 要求默认的字体颜色是灰色,当要输入字时,字体是正常的黑色

    1 <input type=text name='address' size=60 maxlength=60 style="color:gray" value="( ...

  4. iOS开发--QQ音乐练习,歌词的展示,歌词的滚动,歌词的颜色变化

    一.歌词的展示 -- 首先歌词是在scrollView上,scrollView的大小是两个屏幕的宽度 scrollView滚动修改透明度的代码                             ...

  5. Android 字体颜色变化(点击)

    在开发的过程中,经常会遇到这样的场景,点击按钮,背景颜色发生变化:在drawable中,定义xxx.xml(selector) <selector xmlns:android="htt ...

  6. android自定义控件实现TextView按下后字体颜色改变

    今天跟大家分享一下Android自定义控件入门,先介绍一个简单的效果TextView,按下改变字体颜色,后期慢慢扩展更强大的功能 直接看图片             第一张是按下后截的图,功能很简单, ...

  7. 【JavaScript】轻易改变的背景和字体颜色页面

    JavaScript,点击button改变页面背景和字体颜色,网页有N颜色的变化button.点击不同button,网页字体和背景将被改变为不同的颜色. 非常easy的JavaScript小程序. 一 ...

  8. [转载]Linux下终端字体颜色设置方法

    原文地址:Linux下终端字体颜色设置方法作者:router 网上类似的文章有很多,但是都是转来转去的,没有经过测试,按照很多文章的方法会造成你设置之后的终端在换行和删除输入字符时终端显示会乱七八糟, ...

  9. Android 改变字体颜色的三种方法

    在TextView中添加文本时有时需要改变一些文本字体的颜色,今天学到了三种方法,拿出来分享一下     1.在layout文件下的配置xml文件中直接设置字体颜色,通过添加android:textc ...

随机推荐

  1. SpringMVC使用Redis共享session

    在使用之前,请确认项目已经整合了Redis 一.加入依赖 <dependency> <groupId>org.springframework.session</group ...

  2. 基于canvas二次贝塞尔曲线绘制鲜花

    canvas中二次贝塞尔曲线参数说明: cp1x:控制点1横坐标 cp1y:控制点1纵坐标 x: 结束点1横坐标 y:结束点1纵坐标 cp2x:控制点2横坐标 cp2y:控制点2纵坐标 z:结束点2横 ...

  3. sap-abap 权限控制

    FORM AUTH_CHECK . "工厂 LOOP AT S_WERKS. AUTHORITY-CHECK OBJECT 'M_BANF_WRK' ID 'WERKS' FIELD S_W ...

  4. How to: Calculate a Property Value Based on Values from a Detail Collection 如何:基于详细信息集合中的值计算属性值

    This topic describes how to implement a business class, so that one of its properties is calculated ...

  5. Navicat远程连接MySQL8,必知防坑策略

    项目上线是每一个开发工程师面临收获前面抓紧时间开发的成果,但有时我们上线项目首先需要做一些相关的业务测试.通过Xshell远程连接后使用命令行的方式连接操作Mysql这个没什么太大的你问题.但每次通过 ...

  6. 在Electron中最快速预加载脚本

    背景 在Electron打开新窗口的时候,提前加载一段JavaScript脚本,以此内置一些属性或接口给被打开的页面.之所以要以注入方式,而不是页面自己引用,原因是不想麻烦页面自行引用,不想修改旧有的 ...

  7. Rsync实现文件的同步

    故事背景:我们公司是做新零售的,需要对发布的每台机器进行文件的同步更新,所以我这里做了一个小小的调研 技术调研:linux之间同步文件有两种方式rsync与scp. sync和scp在文件夹均不存在时 ...

  8. 图像的相似度Hash算法

    Hash算法有三种,分别为平均哈希算法(aHash).感知哈希算法你(pHash)和差异哈哈希算法(dHash). 针对以上三种的Hash算法详解见博客园文章 https://www.cnblogs. ...

  9. Tornado—接口调用时方法执行顺序

    import tornado.web # web服务 import tornado.ioloop # I/O 时间循环 class MainHandler(tornado.web.RequestHan ...

  10. Struts2.0

    流程详解:   配置详解:   constant  (常用常量配置) 使用Struts2 框架 ,先要导入Struts2 需要的jar 包 , 通过配置中央控制器 以及web.xml 来实现  Str ...