一.靜態(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è)基本屬性:

1. colors:漸變過度的圖層顏色數(shù)組
   2)locations: 數(shù)組中顏色過度的分割位置
   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