CAGradientLayer实现绚丽彩色进度条

效果(gif掉真实际效果可以运行demo):


demo已经放在GitHub,里面有更多动画效果,在不断更新,欢迎下载查看,有帮助可以star,谢谢!
时间问题原理在这里不再多叙述,具体实际实现见代码:

LRProgressColor.h

#import <Foundation/Foundation.h>

@interface LRProgressColor : NSObject

/**
 存储的是CGColor的数组元素
 */
@property (nonatomic, strong)NSArray *cgColors;

/**
 颜色起始点
 */
@property (nonatomic, assign)CGPoint startPoint;

/**
 颜色结束点
 */
@property (nonatomic, assign)CGPoint endPoint;

/**
 颜色移位一次的动画时间
 */

@property (nonatomic, assign)NSTimeInterval duration;

/**
 *  -----------[ 子类可以重写该方法 ]-----------
 *
 *  转换颜色的算法
 *
 *  @return 移位后的颜色数组
 */
- (NSArray *)accessColors;

#pragma mark - 便利构造器方法(自己添加方法) --

+ (instancetype)redGradientColor;

@end

LRProgressColor.m

#import "LRProgressColor.h"

@implementation LRProgressColor

- (instancetype)init{
    if (self = [super init]) {
        
        self.startPoint = CGPointMake(0.f, 0.5f);
        self.endPoint   = CGPointMake(1.f, 0.5f);
        self.duration   = 0.1f;
        
    }
    return self;
}

- (NSArray *)accessColors{
    
    NSMutableArray *mutableArr = [_cgColors mutableCopy];
    //第一个和最后一个颜色交换实现位移
    id last = mutableArr.lastObject;
    [mutableArr removeLastObject];
    [mutableArr insertObject:last atIndex:0];
    
    NSArray *colors = [NSArray arrayWithArray:mutableArr];
    return colors;
}

+ (instancetype)redGradientColor{
    
    LRProgressColor *color = [[self alloc] init];
    
    NSMutableArray *cgColors = [NSMutableArray array];
    [cgColors addObject:(id)[UIColor colorWithRed:0.2f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:0.2f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:0.3f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:0.4f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:0.5f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:0.6f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:0.7f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:0.8f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:0.9f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:1.0f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:1.0f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:1.0f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:1.0f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:1.0f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:1.0f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:1.0f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:1.0f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:0.9f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:0.8f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:0.7f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:0.6f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:0.5f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:0.4f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:0.3f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:0.2f green:0.f blue:0.f alpha:1.f].CGColor];
    [cgColors addObject:(id)[UIColor colorWithRed:0.2f green:0.f blue:0.f alpha:1.f].CGColor];
    
    color.cgColors = cgColors;
    color.duration = 0.1f;
    return color;
}


@end

LRColorFullProgressView.h

#import <UIKit/UIKit.h>
#import "LRProgressColor.h"

@interface LRColorFullProgressView : UIView


/**
 进度
 */
@property (nonatomic, assign)CGFloat progress;


/**
 进度颜色
 */
@property (nonatomic, strong)LRProgressColor *progressColor;



/**
 配置生效以及开始运行
 */
- (void)configAvailableAndBegin;


/**
 便利构造器方法

 @param  frame         尺寸
 @param  progressColor 颜色值,可以为空
 @return 实例对象
 */
+ (instancetype)colorfulProgressViewWithFrame:(CGRect)frame progressColor:(LRProgressColor *)progressColor;
@end

LRColorFullProgressView.m

#import "LRColorFullProgressView.h"

@interface LRColorFullProgressView()<CAAnimationDelegate>{
    
    /**
     *  当前view宽度
     */
    CGFloat _width;
    
    /**
     *  当前view高度 用于记录原始高度
     */
    CGFloat _height;
}

@property (nonatomic, strong)UIView *baseView;

@property (nonatomic, strong)CAGradientLayer *gradientLayer;

@end

@implementation LRColorFullProgressView

- (instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        
        _width = self.frame.size.width;
        _height = self.frame.size.height;
        
        // baseView
        self.baseView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, _height)];
        _baseView.layer.masksToBounds = YES;
        [self addSubview:_baseView];
        
        // gradientLayer
        self.gradientLayer = [CAGradientLayer layer];
        _gradientLayer.frame = self.bounds;
        [self.baseView.layer addSublayer:_gradientLayer];
        
        
    }
    return self;
}

- (void)configAvailableAndBegin{
    
    // 如果没有设置ProgressColor,则自己生成一个
    if (_progressColor == nil) {
        
        _progressColor = [[LRProgressColor alloc] init];
        
        NSMutableArray *cgColors = [NSMutableArray array];
        for (NSInteger i = 0; i < 360; i+=5) {
            //指定HSB,参数是:色调(hue),饱和的(saturation),亮度(brightness)
            UIColor *color = [UIColor colorWithHue:i/360.0 saturation:1.0 brightness:1.0 alpha:1.0];
            [cgColors addObject:(__bridge id)color.CGColor];
        }
        _progressColor.cgColors = cgColors;
    }
    
    _gradientLayer.colors = _progressColor.cgColors;
    _gradientLayer.startPoint = _progressColor.startPoint;
    _gradientLayer.endPoint = _progressColor.endPoint;
    
    [self animation];
}

- (void)animation{
    
    NSArray *fromColors = _progressColor.cgColors;
    //获取最后一帧
    NSArray *toClors = [_progressColor accessColors];
    _progressColor.cgColors = toClors;
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"colors"];
    animation.fromValue = fromColors;
    animation.toValue = toClors;
    animation.duration = _progressColor.duration;
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = YES;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    animation.delegate = self;
    //layerhuadh
    //防止复原 removedOnCompletion == YES 则需要设置动画完后最终颜色
    _gradientLayer.colors = toClors;
    [_gradientLayer addAnimation:animation forKey:@"colorsAnimation"];

}

#pragma mark-- CAAnimationDelegate --

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    [self animation];
}

+ (instancetype)colorfulProgressViewWithFrame:(CGRect)frame progressColor:(LRProgressColor *)progressColor{
    
    LRColorFullProgressView *progressView = [[self alloc] initWithFrame:frame];
    if (progressColor) {
        progressView.progressColor = progressColor;
    }
    [progressView configAvailableAndBegin];
    
    return progressView;
}

#pragma mark -- 重写getter,setter方法 --

@synthesize progress = _progress;
- (void)setProgress:(CGFloat)progress{
    _progress = progress;
    if (progress <= 0) {
        _baseView.frame = CGRectMake(0, 0, 0, _height);
    }else if (progress <= 1){
        _baseView.frame = CGRectMake(0, 0, _width*progress, _height);
    }else{
        _baseView.frame = CGRectMake(0, 0, _width, _height);
    }
}

- (CGFloat)progress{
    return _progress;
}
@end

控制器调用:

#import "LRColorProgressController.h"
#import "LRColorFullProgressView.h"
#import "LRProgressColor.h"

@interface LRColorProgressController ()

@property (nonatomic, strong)GCDTimer *timer;

@property (nonatomic, strong)LRColorFullProgressView *progressView0;

@property (nonatomic, strong)LRColorFullProgressView *progressView1;

@end

@implementation LRColorProgressController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor blackColor];
    
    /*
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = CGRectMake(0, 80, 100, 200);
    [self.view.layer addSublayer:gradientLayer];
    gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                             (__bridge id)[UIColor greenColor].CGColor,
                             (__bridge id)[UIColor blueColor].CGColor];
    gradientLayer.locations = @[@0.25,@0.5,@0.75];
    gradientLayer.startPoint = CGPointMake(0, 0.5);
    gradientLayer.endPoint = CGPointMake(1, 0.5);
     */
    
    // progressView0
    self.progressView0 = [LRColorFullProgressView colorfulProgressViewWithFrame:CGRectMake(0, 160, self.view.width, 2.f)
                                                                  progressColor:nil];
    
    [self.view addSubview:self.progressView0];
    
    // progressView1
    self.progressView1 = [LRColorFullProgressView colorfulProgressViewWithFrame:CGRectMake(0, 180, self.view.width, 2.f)
                                                                  progressColor:[LRProgressColor redGradientColor]];
    
    [self.view addSubview:self.progressView1];
    
    // timer
    _timer = [[GCDTimer alloc] initInQueue:[GCDQueue mainQueue]];
    [_timer event:^{
        
        CGFloat percent0 = arc4random() % 101 / 100.f;
        CGFloat percent1 = arc4random() % 101 / 100.f;
        [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:1.f initialSpringVelocity:0 options:0 animations:^{
            _progressView0.progress = percent0;
            _progressView1.progress = percent1;
        } completion:^(BOOL finished) {
            
        }];
    } timeInterval:NSEC_PER_SEC];
    [_timer start];
}

@end

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,185评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,652评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,524评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,339评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,387评论 6 391
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,287评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,130评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,985评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,420评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,617评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,779评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,477评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,088评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,716评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,857评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,876评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,700评论 2 354

推荐阅读更多精彩内容