實現文字的顏色漸變效果 CAGradientLayer(漸變色圖層)

本次文章,主要講述的是圖層中的mask屬性,利用它,能夠作出文字漸變效果!
思路:
dom

1. 建立UILabel.   --- > label只是用來作文字裁剪;必需要把label添加到view上,若是不添加到view上,label的圖層就不會調用drawRect方法繪製文字,也就沒有文字裁剪了。oop

2. 建立一個顏色漸變層,漸變圖層跟文字控件同樣大。spa

3.用文字圖層裁剪漸變層,只保留文字部分,至關於間接讓漸變層顯示文字,咱們看到的實際上是被裁剪事後,漸變層的部份內容。orm

3.1.設置漸變圖層的mask爲label圖層,就能用文字裁剪漸變圖層了。
get

4.具體代碼實現:it

@implementation ViewControllerio


- (void)viewDidLoad {form

    [super viewDidLoad];select

   


    UILabel *label = [[UILabel alloc] init];定時器

    

    label.text = @"不要放棄,明天會更好";

    

    [label sizeToFit];

    

    label.center = CGPointMake(200, 200);

    

    [self.view addSubview:label];


//1.建立一個顏色漸變層,漸變圖層跟文字控件同樣大。

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];


    gradientLayer.frame = label.frame;

    

    gradientLayer.startPoint = CGPointMake(0.0,1.0);

    gradientLayer.endPoint = CGPointMake(1.0, 1.0);

 //2. 設置漸變層的顏色,隨機顏色漸變

    gradientLayer.colors = @[(id)[self randomColor].CGColor,(id)[self randomColor].CGColor];


 //3. 添加漸變層到控制器的view圖層上

    [self.view.layer addSublayer:gradientLayer];


 //4. 設置漸變層的裁剪層

     gradientLayer.mask = label.layer;

//5. 一旦把label層設置爲mask層,label層就不能顯示了,會直接從父層中移除

// 父層改了,座標系也就改了,須要從新設置label的位置,才能正確的設置裁剪區域。

    label.frame = gradientLayer.bounds;


//6.利用定時器,快速的切換漸變顏色,就有文字顏色變化效果

  CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(textColorChange)];


  [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

}


// 隨機顏色方法

-(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 {

    self.gradientLayer.colors = @[(id)[self randomColor].CGColor,

                              (id)[self randomColor].CGColor,

                              (id)[self randomColor].CGColor];

}

相關文章
相關標籤/搜索