先看一下我們最終要實(shí)現(xiàn)的效果

好吧，開始吧

實(shí)現(xiàn)這種效果我們主要用到了類CAGradientLayer。會(huì)用這個(gè)簡單的例子來說明CAGradientLayer的用法及各個(gè)屬性的含義。

先來聲明一個(gè)CAGradientLayer的實(shí)例

- (CAGradientLayer *)gradientLayer
{
if (!_gradientLayer) {
    _gradientLayer = [CAGradientLayer layer];
    _gradientLayer.startPoint = CGPointMake(0.0, 0.5);
    _gradientLayer.endPoint = CGPointMake(1.0, 0.5);
    
    NSArray *colors =@[
                       (__bridge id _Nullable)[UIColor whiteColor].CGColor,
                       (__bridge id _Nullable)[UIColor blueColor].CGColor,
                       (__bridge id _Nullable)[UIColor cyanColor].CGColor,
                       ];

    _gradientLayer.colors = colors;
    
    NSArray *locations = @[
                           @0.25,
                           @0.5,
                           @0.75,
                           ];
    
    _gradientLayer.locations = locations;
}
return _gradientLayer;
}

解釋代碼：

_gradientLayer.startPoint = CGPointMake(0.0, 0.5);
_gradientLayer.endPoint = CGPointMake(1.0, 0.5);

使用startPoint和endPoint來定義了動(dòng)畫的方向及開始和結(jié)束位置?？磮D說話好理解

NSArray *colors =@[
                       (__bridge id _Nullable)[UIColor blackColor].CGColor,
                       (__bridge id _Nullable)[UIColor whiteColor].CGColor,
                       (__bridge id _Nullable)[UIColor blackColor].CGColor,
                       ];
_gradientLayer.colors = colors;

使用colors來定義我們layer在展現(xiàn)過程中所有的顏色。這段代碼的意思我們是layer以黑色開始，漸變?yōu)榘咨?，最終又漸變?yōu)楹谏?/p>

NSArray *locations = @[
                           @0.25,
                           @0.5,
                           @0.75,
                           ]
_gradientLayer.locations = locations;

使用location來精確定義上面那些顏色出現(xiàn)的位置。根據(jù)上面的colors和loactions的設(shè)置，我們可看到的效果是這樣的

接下來我們設(shè)置frame
- (void)layoutSubviews
{
self.gradientLayer.frame = self.bounds;
}
并且添加到視圖的layer上
- (void)didMoveToWindow
{
[super didMoveToWindow];
[self.layer addSublayer:self.gradientLayer];
}

這時(shí)候我們看到的視圖是這個(gè)樣子的（為了方便看效果，將底色設(shè)置成了紅色）

CAGradientLayer是繼承自CALayer的，并且有增加了4個(gè)屬性colors、locations、startPoint和endPoint。改變他們都能實(shí)現(xiàn)動(dòng)畫，為實(shí)現(xiàn)剛開始的動(dòng)畫，我們來改變locations。
將下面代碼添加只方法didMoveToWindow中

CABasicAnimation *aniamtion = [CABasicAnimation animationWithKeyPath:@"locations"];
aniamtion.fromValue = @[@0.0,@0.0,@0.25];
aniamtion.toValue = @[@0.75,@1.0,@1.0];
aniamtion.duration = 3.0f;
aniamtion.repeatCount = INFINITY;

[self.gradientLayer addAnimation:aniamtion forKey:nil];

這時(shí)候呈現(xiàn)出來的效果是這個(gè)樣子的

接下來我們就是將文字放到上面，

- (void)setText:(NSString *)text
{
[self setNeedsDisplay];

NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc]init];
style.alignment = NSTextAlignmentCenter;

NSDictionary *attributes = @{
                             NSFontAttributeName:[UIFont fontWithName:@"HelveticaNeue-Thin" size:28.0],
                             NSParagraphStyleAttributeName:style,
                             };

UIGraphicsBeginImageContextWithOptions(self.frame.size, NO, 0);
[text drawInRect:self.bounds withAttributes:attributes];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

CALayer *maskLayer = [CALayer layer];
maskLayer.backgroundColor = [UIColor clearColor].CGColor;
maskLayer.frame = CGRectOffset(self.bounds, CGRectGetWidth(self.bounds), 0);
maskLayer.contents = (__bridge id _Nullable)(image.CGImage);

self.gradientLayer.mask = maskLayer;
}

上面的只是實(shí)現(xiàn)了一個(gè)單色調(diào)的，其實(shí)我們也可以實(shí)現(xiàn)多色調(diào)的。只需要修改colors和locations屬性

NSArray *colors = @[
                         (__bridge id _Nullable)[UIColor yellowColor].CGColor,
                         (__bridge id _Nullable)[UIColor greenColor].CGColor,
                         (__bridge id _Nullable)[UIColor orangeColor].CGColor,
                         (__bridge id _Nullable)[UIColor cyanColor].CGColor,
                         (__bridge id _Nullable)[UIColor redColor].CGColor,
                         (__bridge id _Nullable)[UIColor yellowColor].CGColor,
                         
                         ];
    
    _gradientLayer.colors = colors;

NSArray *locations = @[
                          @0.0, @0.0, @0.0, @0.0, @0.0, @0.25
                          ];
    _gradientLayer.locations = locations;

修改：

//    aniamtion.fromValue = @[@0.0,@0.0,@0.25];
//    aniamtion.toValue = @[@0.75,@1.0,@1.0];
aniamtion.fromValue = @[@0.0, @0.0, @0.0, @0.0, @0.0, @0.25
                        ];
aniamtion.toValue = @[@0.65, @0.8, @0.85, @0.9, @0.95, @1.0
                      ];

最終效果：

github地址