美文网首页
渐变颜色进度条

渐变颜色进度条

作者: C_HPY | 来源:发表于2017-06-28 12:07 被阅读30次

直接上效果图:

effect.gif

直接上代码:

#define SCREEN_WIDTH [[UIScreen mainScreen] bounds].size.width
#define SCREEN_HEIGHT [[UIScreen mainScreen] bounds].size.height

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong) CAGradientLayer *gradientLayer;
@property (nonatomic, strong) NSMutableArray *colorsArray;

@property (nonatomic, assign) CGFloat process;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.gradientLayer = [CAGradientLayer layer];
    self.gradientLayer.frame = CGRectMake(50, 200, 1, 2);
    self.gradientLayer.startPoint = CGPointMake(0, 0.5);
    self.gradientLayer.endPoint = CGPointMake(1, 0.5);
    
    self.colorsArray = [NSMutableArray array];
    for (NSInteger i = 0; i <= 360; i += 5) {
        UIColor *color = [UIColor colorWithHue:1.0 * i / 360
                                    saturation:1.0
                                    brightness:1.0
                                         alpha:1.0];
        [self.colorsArray addObject:(id)[color CGColor]];
    }
    
    self.gradientLayer.colors = self.colorsArray;
    [self.view.layer addSublayer:self.gradientLayer];
    
    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:0.05 repeats:YES block:^(NSTimer * _Nonnull timer) {
        
        self.process += 0.01;
        self.process = self.process > 1 ? 1 : self.process;
        self.gradientLayer.frame = CGRectMake(50, 200, self.process * (SCREEN_WIDTH - 100), 2);
        
        UIColor *lastColor = [self.colorsArray lastObject];
        [self.colorsArray removeLastObject];
        [self.colorsArray insertObject:lastColor atIndex:0];
        self.gradientLayer.colors = self.colorsArray;
    }];
}

@end

内容比较简单,只是一个思路,共同学习。

相关文章

  • 渐变 视图\文字

    GitHub下载 效果如下图所示:1、进度条渐变(可自行设置动画) 进度条的动画效果: 2、文字颜色渐变 3、UI...

  • iOS 知识点1--环形颜色渐变进度条3

    在iOS 知识点1--环形颜色渐变进度条2中讲解了如何给进度条添加动画。这一篇中讲一下环形进度条的进度条的渐变色处...

  • 渐变颜色进度条

    直接上效果图: 直接上代码: 内容比较简单,只是一个思路,共同学习。

  • Android 条形进度条

    可设置 线性渐变-背景色-进度条颜色-进度条高度效果图 步骤一:新建自定义控件BarPercentView继承Vi...

  • Vue el-progress进度条的线性渐变问题

    改变线形进度条渐变问题: 代码如下: 改变弧形 进度条渐变问题: 代码如下:

  • vue实现svg绘制半圆渐变进度条

    参考文章:半圆进度条 vue,菜鸟教程绘制的图片样式为: 在此基础上将颜色改为渐变: 代码:

  • 画渐变圆弧

    最近要完成这样的一个效果图: 要求是中间圆环进度条的颜色是渐变的,75%的#FFFFFF渐变到100%,宽度6pt...

  • Android 圆形进度条

    可设置 线性渐变-背景色-进度条颜色-圆弧宽度效果图 步骤一:新建自定义控件CirclePercentView继承...

  • iOS环型进度条颜色渐变

    公司最近要开发新版本了,其中有一个效果是环型进度条颜色渐变,查找了一些资料,打算把具体实现过程说一说。 效果图: ...

  • 带渐变颜色的环形进度条

    创建一个circleView,以后要用到环形进度条实例化之就可以 #import"cycleView.h" @im...

网友评论

      本文标题:渐变颜色进度条

      本文链接:https://www.haomeiwen.com/subject/aihucxtx.html