iOS文字漸變效果

Hhl發表於2017-12-13
iOS

效果圖

  1. 首先建立一個label
UILabel *label = [[UILabel alloc] init];
label.frame = ....
label.text = @"搜尋指定內容";
label.font = [UIFont systemFontOfSize:13.f];
label.textAlignment = NSTextAlignmentCenter;
[self addSubview:label];
複製程式碼
  1. 建立一個顏色漸變層，座標和大小和label一致
// 建立漸變層
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = titleLabel.frame;

// 漸變層顏色隨機
gradientLayer.colors = @[(id)[self randomColor].CGColor, (id)[self randomColor].CGColor, (id)[self randomColor].CGColor];
[self.layer addSublayer:gradientLayer];

// mask層工作原理:按照透明度裁剪，只保留非透明部分，文字就是非透明的，因此除了文字，其他都被裁剪掉，這樣就只會顯示文字下面漸變層的內容，相當於留了文字的區域，讓漸變層去填充文字的顏色。
// 設定漸變層的裁剪層
gradientLayer.mask = titleLabel.layer;

 // 注意:一旦把label層設定為mask層，label層就不能顯示了,會直接從父層中移除，然後作為漸變層的mask層，且label層的父層會指向漸變層
// 父層改了，座標系也就改了，需要重新設定label的位置，才能正確的設定裁剪區域。
titleLabel.frame = gradientLayer.bounds;
複製程式碼
  1. 新增定時器，切換漸變顏色(什麼是CADisplayLink)
CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(textColorChange)];
// frameInterval屬性是可讀可寫的NSInteger型值，標識間隔多少幀呼叫一次selector 方法，預設值是1，即每幀都呼叫一次。如果每幀都呼叫一次的話，對於iOS裝置來說那重新整理頻率就是60HZ也就是每秒60次，如果將 frameInterval 設為2 那麼就會兩幀呼叫一次，也就是變成了每秒重新整理30次。以此類推
link.frameInterval = 6;

// 使用NSRunLoopCommonModes模式，防止頁面滑動等操作時不執行方法
[link addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
複製程式碼
  1. 顏色隨機方法，定時器觸發方法
    // 隨機顏色方法
-(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];   
}

複製程式碼

參考文章:http://www.cocoachina.com/ios/20150716/12571.html

相關文章