CAGradientLayer实现色差动画

效果图:

代码部分:

RPGradientAnimationView.h

#import <UIKit/UIKit.h>

typedef enum : NSUInteger {
    RPGradientAnimationViewColorDirectionUpToDown               = 1,       // 从上到下
    RPGradientAnimationViewColorDirectionLeftToRight            = 2,       // 从左到右
    RPGradientAnimationViewColorDirectionDownToUp               = 3,       // 从下到上
    RPGradientAnimationViewColorDirectionRightToLeft            = 4,       // 从右到左
    RPGradientAnimationViewColorDirectionObliqueLeftToRigth     = 5,       // 对角线:左上到右下
    RPGradientAnimationViewColorDirectionObliqueRightToLeft     = 6        // 对角线:右上到左下
    
} RPGradientAnimationViewColorDirection;

@interface RPGradientAnimationView : UIImageView

/** 渐变色方向 */
@property (nonatomic, assign) RPGradientAnimationViewColorDirection colorDirection;
/** 颜色 */
@property (nonatomic, strong) UIColor *color;
/** 颜色百分比(非透明部分) 取值范围:0~1 */
@property (nonatomic, assign) CGFloat percent;


@end

 

RPGradientAnimationView.m

#import "RPGradientAnimationView.h"

@interface RPGradientAnimationView ()

// 渐变层
@property (nonatomic, strong) CAGradientLayer *gradientLayer;
// 背景图片
@property (nonatomic, weak) UIImageView *bgImageView;

@end

@implementation RPGradientAnimationView

- (instancetype)init
{
    self = [super init];
    if (self) {
        
        // 初始化渐变层
        self.gradientLayer = [CAGradientLayer layer];
        
        // 颜色组
        self.gradientLayer.colors = @[
                                      (id)[UIColor clearColor].CGColor,
                                      (id)[UIColor redColor].CGColor
                                      ];
        
        // 设置颜色分隔点
        self.gradientLayer.locations = @[@(1.f), @(1.f)];
        
        // 设置渐变方向
        self.gradientLayer.startPoint = CGPointMake(0, 0);
        self.gradientLayer.endPoint = CGPointMake(0, 1);
        
        // 添加渐变层
        [self.layer addSublayer:self.gradientLayer];
        
    }
    return self;
}

- (void)layoutSubviews
{
    [super layoutSubviews];
    self.gradientLayer.frame = self.bounds;
}

- (void)setColor:(UIColor *)color
{
    _color = color;
    self.gradientLayer.colors = @[
                                  (id)[UIColor clearColor].CGColor,
                                  (id)color.CGColor
                                  ];
}

- (void)setColorDirection:(RPGradientAnimationViewColorDirection)colorDirection
{
    _colorDirection = colorDirection;
    CGPoint startPoint;
    CGPoint endPoint;
    switch (colorDirection) {
        case RPGradientAnimationViewColorDirectionUpToDown:
            startPoint = CGPointMake(0, 0);
            endPoint = CGPointMake(0, 1);
            break;
        case RPGradientAnimationViewColorDirectionLeftToRight:
            startPoint = CGPointMake(0, 0);
            endPoint = CGPointMake(1, 0);
            break;
        case RPGradientAnimationViewColorDirectionDownToUp:
            startPoint = CGPointMake(0, 1);
            endPoint = CGPointMake(0, 0);
            break;
        case RPGradientAnimationViewColorDirectionRightToLeft:
            startPoint = CGPointMake(1, 0);
            endPoint = CGPointMake(0, 0);
            break;
        case RPGradientAnimationViewColorDirectionObliqueLeftToRigth:
            startPoint = CGPointMake(0, 0);
            endPoint = CGPointMake(1, 1);
            break;
        case RPGradientAnimationViewColorDirectionObliqueRightToLeft:
            startPoint = CGPointMake(1, 0);
            endPoint = CGPointMake(0, 1);
            break;
        default:
            startPoint = CGPointMake(0, 0);
            endPoint = CGPointMake(0, 1);
            break;
    }
    self.gradientLayer.startPoint = startPoint;
    self.gradientLayer.endPoint = endPoint;
}

- (void)setPercent:(CGFloat)percent
{
    if (!(percent < 0 || percent > 1)) {
        _percent = percent;
        self.gradientLayer.locations = @[@(percent), @(1.f)];
    }
}

@end

 

ViewController.m

#import "ViewController.h"
#import "RPGradientAnimationView.h"

#define RPRandomColor [UIColor colorWithRed:(arc4random_uniform(255))/255.0 green:(arc4random_uniform(255))/255.0 blue:(arc4random_uniform(255))/255.0 alpha:1.0]

@interface ViewController ()

@property (nonatomic, strong) NSTimer *timer;
@property (nonatomic, weak) RPGradientAnimationView *gradientAnimationView;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    RPGradientAnimationView *gradientAnimationView = [[RPGradientAnimationView alloc] init];
    gradientAnimationView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
    gradientAnimationView.colorDirection = RPGradientAnimationViewColorDirectionUpToDown;
    gradientAnimationView.color = [UIColor redColor];
    gradientAnimationView.image = [UIImage imageNamed:@"开始图片"];
    gradientAnimationView.contentMode = UIViewContentModeScaleAspectFill;
    [self.view addSubview:gradientAnimationView];
    self.gradientAnimationView = gradientAnimationView;
    
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.f target:self selector:@selector(startAnimation) userInfo:nil repeats:YES];
}

- (void)startAnimation
{
    self.gradientAnimationView.percent = arc4random() % 100 / 100.0;
    self.gradientAnimationView.color = RPRandomColor;
}

@end

 

github:https://github.com/RinpeChen/RPGradientAnimationViewDemo