#import <UIKit/UIKit.h>

@interface JianBianView : UIView

//为了增加一个表示进度条的进行,可们可以使用mask属性来屏蔽一部分

@property (nonatomic, strong) CALayer *maskLayer;

@property (nonatomic, assign) CGFloat progress;

//动画方法

-(void)performAnimation;

-(void)setProgress:(CGFloat)value;

@end

#import "JianBianView.h"

@implementation JianBianView

@synthesize maskLayer,progress;

+(Class)layerClass

{

//设置默认是 CAGradientLayer

return [CAGradientLayer class];

}

-(id)initWithFrame:(CGRect)frame

{

self = [super initWithFrame:frame];

if (self)

{

maskLayer = [CALayer layer];

[maskLayer setFrame:CGRectMake(0, 0, 0, frame.size.height)];

[maskLayer setBackgroundColor:[UIColor blackColor].CGColor];

CAGradientLayer *layer = (id)[self layer];

[layer setStartPoint:CGPointMake(0.0, 0.5)];

[layer setEndPoint:CGPointMake(1.0, 0.5)];

NSMutableArray *colors = [[NSMutableArray alloc] init];

for (NSInteger hue = 0; hue < 360; hue += 5)

{

UIColor *color;

//hue 色调 saturation 饱和度 brightness 亮度

color = [UIColor colorWithHue:1.0*hue/360.0 saturation:1.0 brightness:1.0 alpha:1.0];

[colors addObject:(id)[color CGColor]];

}

[layer setColors:[NSArray arrayWithArray:colors]];

[layer setMask:maskLayer];

}

return self;

}

//创建一个宽度为0的mask覆盖整个View,mask的颜色不重要,当我们progress属性更新的时候我们会增加它的宽度 然后在initWithFrame:里面添加:

/*

maskLayer = [CALayer layer];

[maskLayer setFrame:CGRectMake(0, 0, 0, frame.size.height)];

[maskLayer setBackgroundColor:[UIColor blackColor].CGColor];

*/

//所以重写setProgress:

-(void)setProgress:(CGFloat)value

{

if (progress != value)

{

progress = MIN(1.0, fabs(value));

[self setNeedsLayout];

}

}

-(void)layoutSubviews

{

CGRect maskRect = [maskLayer frame];

maskRect.size.width = CGRectGetWidth([self bounds]) * progress;

[maskLayer setFrame:maskRect];

}

-(void)performAnimation

{

// Move the last color in the array to the front

// shifting all the other colors.

CAGradientLayer *layer = (id)[self layer];

NSMutableArray *mutable = [[layer colors] mutableCopy];

id lastColor = [mutable lastObject];

[mutable removeLastObject];

[mutable insertObject:lastColor atIndex:0];

NSArray *shiftColors = [NSArray arrayWithArray:mutable];

[layer setColors:shiftColors];

CABasicAnimation *animation;

animation = [CABasicAnimation animationWithKeyPath:@"Colors"];

[animation setToValue:shiftColors];

[animation setDuration:0.08];

[animation setRemovedOnCompletion:YES];

[animation setFillMode:kCAFillModeForwards];

[animation setDelegate:self];

[layer addAnimation:animation forKey:@""];

}

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag

{

[self performAnimation];

}

@end

视图控制器 调用

- (void)viewDidLoad

{

[super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

self.title = @"渐变测试";

self.view.backgroundColor = [UIColor whiteColor];

//    [self jianBianMethord];

[NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(timeMethod) userInfo:nil repeats:YES];

[self addJianBianView];

}

-(void)timeMethod

{

NSLog(@"进入");

progress += 0.1;

[self.jianBianView setProgress:progress];

}

//-----------添加渐变view

-(void)addJianBianView

{

if (self.jianBianView == nil)

{

self.jianBianView = [[JianBianView alloc] initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 10)];

[self.view addSubview:self.jianBianView];

[self.jianBianView performAnimation];

}

}

iOS 渐变进度条的更多相关文章

  1. 【iOS】环形渐变进度条实现

    之前有人在找渐变进度条的效果,闲来无事就顺手写了一个,然后画了视图层级,方便讲解. 环境信息: Mac OS X 10.10.3 Xcode 6.3.1 iOS 8.3 效果图: 源码下载地址: ht ...

  2. iOS圆弧渐变进度条的实现

    由于项目需要一个环形渐变进度条显示课程,这方便网上的确有很多相关资料但是,都是比较零散的而且,大多数只是放一堆代码就算完了.这里我想详细写一篇我自己实现这个进度条的过程. 实现一个圆弧进度条主要分为三 ...

  3. 自定义控件之圆形颜色渐变进度条--SweepGradient

    前几天在群里面有人找圆形可颜色渐变进度条,其中主要的知识点是SweepGradient: mSweepGradient = new SweepGradient(240, 360, new int[] ...

  4. iOS 自定义进度条

    自定义条形进度条(iOS) ViewController.m文件 #import "ViewController.h" @interface ViewController () @ ...

  5. [iOS]圆形进度条及计时功能

    平时用战网安全令的时候很喜欢圆形倒计时的效果,然后简单看了一下Android的圆形进度条,后来又写了一个IOS的.整体界面参照IOS系统的倒计时功能,顺便熟悉了UIPickerView的一些特性的实现 ...

  6. android自己定义渐变进度条

    项目中须要用到一个弧形渐变的进度条,通过android自带是不能实现的.我是没有找到实现的方法,有大神知道的能够指点.效果图是以下这种 这是通过继承VIew来绘制出来的,网上也有相似的,可是代码那是相 ...

  7. vue 渐变 进度条 progress

    废话 不多少说 ,直接上代码 新建文件 gradual-progress.vue <!-- * @Author: gfc * @Date: 2019-11-07 14:00:11 * @Last ...

  8. svg和css3创建环形渐变进度条

    在负责的项目中,有一个环形渐变读取进度的效果的需求,于是在网上查阅相关资料整理一下.代码如下: <!DOCTYPE html> <html lang="en"&g ...

  9. canvas锥形渐变进度条

    从一个渐变圆角进度条浅出画一个圆 开始 这一切需要从一个(简单)的需求开始,在最开始对设计第一眼看到这张图的时候,感觉挺简单的嘛,直接用echarts饼图模拟出来一个就好了 echarts 然后上ec ...

随机推荐

  1. sqlserver 事务日志过大 收缩方法解决方案

    sqlserver 事务日志过大,可能会导致备份失败或者数据库出现异常,所以要定期清除sqlserver 事务日志 建议:为了防止日志文件无限扩大,可以对日志文件作一些限制. 清除sqlserver事 ...

  2. Dns 类

    Dns 类型公开以下成员. 方法       名称 说明 BeginGetHostAddresses 异步返回指定主机的 Internet 协议 (IP) 地址. BeginGetHostByName ...

  3. javascript之原型模式学习

    1.创建的每个函数都有一个prototype(原型)属性.这个属性是一个指针,指向一个对象.而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法. 字面意思是prototype就是通过调用构 ...

  4. @@identity的使用

    -- ============================================= -- Author: Qiuhua,Huang -- Create date: 08/09/2012 ...

  5. linux 下mysql 开启远程连接

    系统通过netstat -ntlp  来查看正在运行服务所使用的端口 ,查看3306端口是否开启. 防火墙iptables 如果是新装的 系统, 一般不用管这个因素,不过我们也先 用service i ...

  6. Visual Studio 2015中快捷键总结

    今天总结了Visual Studio工具中常用的快捷键,可供平时参考查阅. 程序调试相关的快捷键F5: 启动调试Ctrl+F5: 开始执行(不调试)Shift+F5: 停止调试Ctrl+Shift+F ...

  7. Sql 获取向上取整、向下取整、四舍五入取整的实例

    [四舍五入取整截取] select round(54.56,0) [向下取整截取] SELECT FLOOR(54.56) [向上取整截取]  SELECT   CEILING(13.15) --MS ...

  8. js中,全局变量与直接添加在window属性的区别

    在js中定义的全局变量是挂在window下的,而window的属性也一样,那么这两者有什么区别呢? 其实这两者还是有小小的区别的,全局变量是不能通过delete操作符删除的,而直接定义在window上 ...

  9. android中添加背景音乐

    方法一:这是使用java中的多线程,另外new出一个类,用类来启动音乐. 这个方法,就像当初写java的小游戏一样,不过是在电脑上运行的,可以控制每一个动作,比如你的触碰动作,但是,在我这个游戏中,我 ...

  10. IOS setValue forKey

    NSObjiect *obj:[obj setValue:value forKey:@"cpname"]复制代码的时候都会出现这个异常this class is not key v ...