mask应用之制作颜色渐变字体
2015-12-10 18:16
465 查看
参考博客:博客1
这里主要说下哦,参考的博客我把源码实现了一下,发现效果和作者呈现的gif图片不一样,动画太快,眼睛快要闪瞎了哦,另外,原作者的渐变效果是从上往下,这里通过修改一些属性,来时文字颜色有左往右不断的呈现渐变效果
具体参考我的这边博客我的博客
别的不说了,直接上代码了:
动画效果如下:
另外从网络上找来了另外一个demo效果如下:
demo下载地址:demo
这里主要说下哦,参考的博客我把源码实现了一下,发现效果和作者呈现的gif图片不一样,动画太快,眼睛快要闪瞎了哦,另外,原作者的渐变效果是从上往下,这里通过修改一些属性,来时文字颜色有左往右不断的呈现渐变效果
gradientLayer.startPoint = CGPointMake(0, 0.5); gradientLayer.endPoint = CGPointMake(1, 0.5); //这两段代码来决定渐变的位置,
具体参考我的这边博客我的博客
别的不说了,直接上代码了:
// // ViewController.m // ChangeColorTextDemo // // Created by Jack on 15/12/10. // Copyright © 2015年 Jack. All rights reserved. // #import "ViewController.h" @interface ViewController () { CAGradientLayer *gradientLayer; } @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. // 创建UILabel UILabel *label = [[UILabel alloc] init]; label.text = @"Jack,专注于高级iOS开发"; [label sizeToFit]; label.center = CGPointMake(200, 100); // 疑问:label只是用来做文字裁剪,能否不添加到view上。 // 必须要把Label添加到view上,如果不添加到view上,label的图层就不会调用drawRect方法绘制文字,也就没有文字裁剪了。 // 如何验证,自定义Label,重写drawRect方法,看是否调用,发现不添加上去,就不会调用 [self.view addSubview:label]; // 创建渐变层 gradientLayer = [CAGradientLayer layer]; gradientLayer.startPoint = CGPointMake(0, 0.5); gradientLayer.endPoint = CGPointMake(1, 0.5); 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; [self performSelector:@selector(textColorChange) withObject:nil afterDelay:0.5]; } // 随机颜色方法 -(UIColor *)randomColor{ CGFloat r = arc4random_uniform(256) / 255.0; CGFloat g = arc4random_uniform(256) / 255.0; CGFloat b = arc4random_uniform(256) / 255.0; return [UIColor colorWithRed:r green:g blue:b alpha:1]; } // 定时器触发方法 -(void)textColorChange { gradientLayer.colors = @[(id)[self randomColor].CGColor, (id)[self randomColor].CGColor, (id)[self randomColor].CGColor, (id)[self randomColor].CGColor, (id)[self randomColor].CGColor]; [self performSelector:@selector(textColorChange) withObject:nil afterDelay:0.5]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end
动画效果如下:
另外从网络上找来了另外一个demo效果如下:
demo下载地址:demo
相关文章推荐
- flash 系统字体显示问题
- C#及WPF获取本机所有字体和颜色的方法
- 谈谈网页设计中的字体应用Font Set
- PDF里的文字显示模糊的解决方法
- 保证可下载的漂亮动作2008奥运比赛项目字体
- C#实现字体旋转的方法
- 网页设计中的 serif 和 sans-serif字体应用
- 优化WordPress的Google字体以加速国内服务器上的运行
- C#实现缩放字体的方法
- ExtJs默认的字体大小改变的几种方法(自己整理)
- 一个实现字体大中小方法的JavaScript代码
- jquery实现实时改变网页字体大小、字体背景色和颜色的方法
- php修改NetBeans默认字体的大小
- 如何解决修改StaticText的字体
- asp.net调用系统设置字体文本框的方法
- C#读取系统字体颜色与大小的方法
- linux BASH shell下设置字体及背景颜色
- 在shell或者perl中改变字体或背景的颜色
- Javascript 颜色渐变效果的实现代码
- Android编程中TextView字体属性设置方法(大小、字体、下划线、背景色)