一.靜態(tài)使用
1.創(chuàng)建一個(gè) UIImageView *baseImageView,
2.創(chuàng)建一個(gè) CAradientLayer
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = _baseImageView.bounds;
gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,(__bridge id)[UIColor blackColor].CGColor,(__bridge id)[UIColor clearColor].CGColor];
gradientLayer.locations = @[@(0.25),@(0.5),@(0.75)];
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(1, 1);
3.創(chuàng)建一個(gè)接受 gradientLayer 的 View
UIView *containtView = [[UIView alloc] initWithFrame:_baseImageView.bounds];
[containtView.layer addSublayer:gradientLayer];
4.將 _baseImageView 的 maskView 設(shè)置為 containtView
_baseImageView.maskView = containtView;
5.運(yùn)行效果:
8364ba3b-d6a6-442f-9c86-fc846015c669.png
6.總結(jié):
使用 CAGradientLayer 實(shí)現(xiàn)漸變效果,要設(shè)置4個(gè)基本屬性:
- colors:漸變過(guò)度的圖層顏色數(shù)組
2)locations: 數(shù)組中顏色過(guò)度的分割位置
3)startPoint: 漸變的起點(diǎn)
4)endPoint: 漸變的終點(diǎn)
二.動(dòng)畫使用
1.在原有代碼基礎(chǔ)上添加定時(shí)器
- (void)viewDidLoad {
[super viewDidLoad];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = _baseImageView.bounds;
gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor clearColor].CGColor];
gradientLayer.locations = @[@(0.25),@(0.5),@(0.75)];
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(1, 1);
view = [[UIView alloc] initWithFrame:_baseImageView.bounds];
[view.layer addSublayer:gradientLayer];
_baseImageView.maskView = view;
[NSTimer scheduledTimerWithTimeInterval:2.0f target:self selector:@selector(repeat) userInfo:nil repeats:YES];
}
- (void)repeat{
dispatch_async(dispatch_get_main_queue(), ^{
__block CGRect rect = CGRectMake(-_baseImageView.bounds.size.width, 0, _baseImageView.bounds.size.width * 2, _baseImageView.bounds.size.height * 2);
view.frame = rect;
[UIView animateWithDuration:1.0f animations:^{
rect.origin.x = _baseImageView.bounds.size.width;
view.frame = rect;
}];
});
}
2.運(yùn)行效果
4c374d8b-f47b-4f0c-906c-8e91473113c4.gif
