文字與圖片漸變效果（圖層CALayer與屬性蒙版mask ）

首先，我們需要稍微理清一下CAGradientLayer、CALayer，UIView和mask的大概關係。

在iOS中，能看得見摸的着的基本都是UIView，如按鈕、圖片等。UIView之所以能看得見是因爲裏面有一個圖層（即CALayer對象）

對UIView的位置大小的操作，實際上就是對圖層（即CALayer對象）的操作。

可以把圖層看成是沒有事件的UIView，而對應UIView則是這個圖層的控制者。所以如果直接在圖層上添加（addSublayer）圖層，就會直接覆蓋在上面。

CAGradientLayer是繼承CALayer的，用於畫出漸變圖層。

圖層A有一個屬性是mask，mask實際上也是一個圖層，該圖層設置爲圖層B。

mask層工作原理是按照透明度裁剪，只保留非透明部分，所以圖層B並非覆蓋在圖層A上，而是根據圖層B不透明的部分去顯示圖層A。

若圖層B是個藍色圓環，而圖層A是個紅色的長方形，那麼最終顯示的就是紅色的圓環。（所以說設置蒙版mask並不會改變原來圖層的顏色）

   CGFloat startY = 64;

    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(64, startY, 200, 15)];

    label.text = @"你好啊";

    [self.view addSubview:label];

    

    //設置漸變層，實際上有這個漸變層就可以顯示了。

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];

    gradientLayer.frame = label.frame;

    UIColor *beforeColor = [UIColor blueColor];

    UIColor *afterColor = [UIColor redColor];

    // 設置漸變層的顏色

    gradientLayer.colors = @[(id)beforeColor.CGColor,(id)afterColor.CGColor];

// 疑問:漸變層能不能加在label上
// 不能，如果添加漸變層到label圖層上,則會遮蓋label的文字圖層；如果作爲label圖層的mask，由於mask是完全不透明漸變層，所以是正常顯示，這種情況如果消失了，說明mask的frame.origin沒有設置正確。
        

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

[self.view.layer addSublayer:gradientLayer];

    gradientLayer.mask = label.layer;

    label.layer.frame = gradientLayer.bounds;

    

#####################

    

    首先，將gradientLayer添加到self.view.layer層中。然後設置gradientLayer的mask，因爲mask本質上也是一個layer圖層。裁剪的原理是根據透明度來進行裁剪的。

    

    所以說，當label作爲mask圖層的時候，不透明顯示的只是"你好啊"這三個文字。

    同時，裁剪的時候不改變顏色的顯示，所以說，”你好啊“顯示的就是漸變的顏色。

##########################

原文如下：

先讓我們看看，能實現的最終效果：

1450806559781.png

首先，我們需要稍微理清一下CAGradientLayer、CALayer，UIView和mask的大概關係。
在iOS中，能看得見摸的着的基本都是UIView，如按鈕、圖片等。UIView之所以能看得見是因爲裏面有一個圖層（即CALayer對象）對UIView的位置大小的操作，實際上就是對圖層（即CALayer對象）的操作。可以把圖層看成是沒有事件的UIView，而對應UIView則是這個圖層的控制者。所以如果直接在圖層上添加（addSublayer）圖層，就會直接覆蓋在上面。CAGradientLayer是繼承CALayer的，用於畫出漸變圖層。圖層A有一個屬性是mask，mask實際上也是一個圖層，該圖層設置爲圖層B。mask層工作原理是按照透明度裁剪，只保留非透明部分，所以圖層B並非覆蓋在圖層A上，而是根據圖層B不透明的部分去顯示圖層A。若圖層B是個藍色圓環，而圖層A是個紅色的長方形，那麼最終顯示的就是紅色的圓環。（所以說設置蒙版mask並不會改變原來圖層的顏色）

實例一：

1450792777714.png

1450804026188.png

漸變思路(適合文字漸變和圖片不透明部分漸變)：UILabel本身的圖層其實就是文字，所以我們需要創建一個漸變層到UILabel的父視圖圖層（即superview的layer對象），然後使用UILabel本身的圖層作爲漸變層的mask即可。

    UILabel *label4 = ({
        UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(64, 300, 200, 15)];
        label.text = @"你好啊";
        [self.view addSubview:label];
        //設置漸變層，實際上有這個漸變層就可以顯示了。
        CAGradientLayer *gradientLayer = [CAGradientLayer layer];
        gradientLayer.frame = label.frame;
        // 設置漸變層的顏色
        gradientLayer.colors = @[(id)beforeColor.CGColor,(id)afterColor.CGColor];
        //水平漸變添加下面兩行即可
        //    gradientLayer.startPoint = CGPointMake(0, .5);
        //    gradientLayer.endPoint = CGPointMake(1, .5);
        // 疑問:漸變層能不能加在label上
        // 不能，如果添加漸變層到label圖層上,則會遮蓋label的文字圖層；如果作爲label圖層的mask，由於mask是完全不透明漸變層，所以是正常顯示，這種情況如果消失了，說明mask的frame.origin沒有設置正確。
        // 添加漸變層到控制器的view圖層上
        [self.view.layer addSublayer:gradientLayer];
        gradientLayer.mask = label.layer;
        //由於label.layer從self.view.layer中移動到漸變層gradientLayer中作爲蒙版，所以座標改變了需要重新調整。
        label.layer.frame = gradientLayer.bounds;
        label;
    });

實例二：

1450804128723.png

1450804110590.png

漸變思路(適合文字背景漸變和圖片透明部分漸變)：創建漸變圖層添加到圖標或文字的父視圖圖層（既superview的layer），然後把圖標或文字的圖層addSublayer到漸變層即可。

    UIImageView *imageView5 = ({
        UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(64, 400, 200, 30)];
        imageView.contentMode = UIViewContentModeScaleAspectFit;
        imageView.image = [UIImage imageNamed:@"abc.png"];
        startY +=35;
        [self.view addSubview:imageView];
        CAGradientLayer *gradientLayer = [CAGradientLayer layer];
        gradientLayer.frame = imageView.frame;
        gradientLayer.colors = @[(id)beforeColor.CGColor,(id)afterColor.CGColor];
        //添加漸變層到view圖層上
        [self.view.layer addSublayer:gradientLayer];
        //將原來的圖標圖層或者文字圖層添加到漸變層上
        [gradientLayer addSublayer:imageView.layer];
        //由於imageView.layer從self.view.layer中移動到漸變層gradientLayer中，所以座標改變了需要重新調整。
        imageView.layer.frame = imageView.layer.bounds;
        imageView;
    });

實例三：

有時候可能還需要製作成這種圖片：

1450805634345.png

這時候只需要將UIImageView的寬高設置成相等的，並且在實例二的基礎上對漸變層的cornerRadius和masksToBounds處理即可。相信大家對這兩個屬性都比較熟悉了。
在漸變層做圓角處理，處理成圓：

        gradientLayer.cornerRadius = imageView.frame.size.width/2;
        gradientLayer.masksToBounds = YES;

演示Demo下載:GraduatedColor