如何实现文字渐变的效果

先看一下我们最终要实现的效果

好吧，开始吧

实现这种效果我们主要用到了类CAGradientLayer。会用这个简单的例子来说明CAGradientLayer的用法及各个属性的含义。

先来声明一个CAGradientLayer的实例

- (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来定义了动画的方向及开始和结束位置。看图说话好理解

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在展现过程中所有的颜色。这段代码的意思我们是layer以黑色开始，渐变为白色，最终又渐变为黑色。

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

使用location来精确定义上面那些颜色出现的位置。根据上面的colors和loactions的设置，我们可看到的效果是这样的

接下来我们设置frame
- (void)layoutSubviews
{
self.gradientLayer.frame = self.bounds;
}
并且添加到视图的layer上
- (void)didMoveToWindow
{
[super didMoveToWindow];
[self.layer addSublayer:self.gradientLayer];
}

这时候我们看到的视图是这个样子的（为了方便看效果，将底色设置成了红色）

我们发现黑色会一直持续到们设置的0.25处，在0.5处颜色为白色，0.25到0.5之间，颜色逐渐由黑色变为白色。这样就好理解上面的colors和locations两个属性的含义了。

CAGradientLayer是继承自CALayer的，并且有增加了4个属性colors、locations、startPoint和endPoint。改变他们都能实现动画，为实现刚开始的动画，我们来改变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];

这时候呈现出来的效果是这个样子的

接下来我们就是将文字放到上面，

- (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;
}

上面的只是实现了一个单色调的，其实我们也可以实现多色调的。只需要修改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地址