先看一下我們最終要實現的效果
好吧，開始吧
實現這種效果我們主要用到了類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
];
最終效果：
