先看一下我们最终要实现的效果
好吧，开始吧
实现这种效果我们主要用到了类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
];
最终效果：
