登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

ZZCircleProgress

[复制链接]
来自: tellmewhy? 分类: iOS精品源码 上传时间: 2017-1-6 15:09:37
Tag:Progress 进度条 圆弧 动画 animation

项目介绍:

ZZCircleProgress

draw rect实现的圆形进度条。可以使用部分圆弧当做整个进度条,并可以随意设置起始角度及减少的圆弧角度大小。

<h2>更新日志</h2>
1.增加 increaseFromLast 参数,为YES则动画是从上次的数值开始动画,否则从头开始。

2.增加 notAnimated 参数,为YES则set数值的时候没有动画。

3.增加 forceRefresh 参数,为YES则set的值等于上次时也刷新动画。

<h2>使用方法:</h2>
1.pod 'ZZCircleProgress',搜索不到请pod setup一下。

2.或ZZCircleProgress文件夹拷贝至项目工程。

3.导入ZZCircleProgress.h。

<h3>初始化:</h3>


ZZCircleProgress *progressView = [[ZZCircleProgress alloc] initWithFrame:CGRectZero pathBackColor:[UIColor cyanColor] pathFillColor:[UIColor redColor] startAngle:0 strokeWidth:8];
//    progressView.pathBackColor = [UIColor cyanColor];//线条背景色
//    progressView.pathFillColor = [UIColor redColor];//线条填充色
//    progressView.startAngle = 0;//圆弧开始角度,默认为-90°,即正上方
//    progressView.reduceValue = 0;//整个圆弧减少的角度,默认为0
//    progressView.strokeWidth = 8;//线宽,默认为10
progressView.frame = CGRectMake(100, 100, 150, 150);
progressView.increaseFromLast = NO;//为YES动画则从上次的progress开始,否则从头开始,默认为NO
progressView.animationModel = CircleIncreaseSameTime;//不同的进度条动画时间相同
progressView.showPoint = YES;//是否显示光标,默认为YES
progressView.showProgressText = NO;//是否显示进度文本,默认为YES
progressView.notAnimated = NO;//不开启动画,默认为NO
progressView.forceRefresh = YES;//是否在set的值等于上次值时同样刷新动画,默认为NO

progressView.progress = 0.5;//设置完之后给progress的值
[self.view addSubview:progressView];

<h3>特色功能:</h3>
1.起始角度及缺少的圆弧角度可以自己指定。而且只需要传入具体的角度即可。如

circle1.startAngle = 90; //起点则为圆弧的正下方。
circle1.reduceValue = 30; //360 - 30 = 330度即为整个进度条的全部,计算进度条位置会自动减去30度。

2.两种动画模式

circle1.animationModel = CircleIncreaseSameTime;// 不同进度动画时间相同
circle1.animationModel = CircleIncreaseByProgress;// 进度越大时间越久

3.可以从上次的数值动画到当前set的数值,为YES则从上次数值开始

circle1.increaseFromLast = YES;

4.是否显示光标及进度文字。设置光标图片

circle1.showPoint = YES;
circle1.showProgressText = YES;
circle1.pointImage = [UIImage imageNamed:@"xxx"];

5.动画开关

circle1.notAnimated = YES;//关闭动画

<h2>效果展示:</h3>

image

一直想做一个实现和使用起来都比较简便的圆形进度条,但是网上一直没有找到合适的,因此打算参考别人的代码并加入自己的实现及优化,
从而实现了现在的这个圆弧形进度条。项目开发中需要一个简单的进度条,但是搜索了很多一直没有找到适合我们项目的使用情况。主要是有两点问题。

首先一个问题就是进度条的布局问题。网上找的一些实现有的必须在初始化的时候给进度条视图确定的坐标,从而才能保证布局的正确性,但是有时候我们并不能保证初始化的
时候我们就已经知道进度条的坐标,因此就十分不方便。而目前的实现方法系统通过自动调用draw rect就会知道自己的坐标变化,从而能保证坐标计算的正确性。
因此比较方便。就目前测试来看初始化的时候指定坐标或者是在之后指定坐标还是使用相对布局,暂时都没有什么问题。因此可以放心使用。

还有个问题就是网上目前大部分的圆形进度条过度追求各种样式各种功能,从而造成代码阅读起来很费劲,难以找到我们最需要的关键实现信息。而我们实际开发中可能仅仅
只需要某个简单的实现,使用时不会出现问题就好了。

实现这个进度条的目的就是给开发者们一个简单的实现实例,从而可以方便的加入自己的想法及实现。目前只是一个圆弧形进度条加上一个光标,技术难点就是每次重绘的时候
光标的位置比较难计算。要用到正弦余弦函数,然后再根据进度条半径及线宽计算出光标的x,y值。从而计算出小圆点的坐标。另一个难点就是每次重绘的时候要保证进度条和
光标保持同步,因此只好用NSTimer定时调用progress值递增并重绘方法,从而保证每次进度条和光标增量相同,实现同步动画效果。

github地址:https://github.com/zhouxing5311/ZZCircleProgress

code4app

相关源码推荐:

我来说两句
*滑动验证:
所有评论(281)
kengsir 2017-1-9 14:10:20
code4app好的内容真的很多~赞
回复
AlonMessi 2017-1-9 14:12:29
mark,收藏了
回复
hellokenken 2017-1-9 14:14:51
我是来学习的
回复
BlueManlove 2017-1-9 14:19:01
膜拜大神~
回复
phoiu 2017-1-9 14:21:59
支持,感谢,祝code4app越来越好~
回复
littleRed 2017-1-9 14:26:49
我是来学习的
回复
code-Yan 2017-1-9 17:08:24
感谢分享,Code4App有你更精彩:)
回复
code4app热心网友 2017-1-9 18:15:17
楼主用心了,内容非常精彩。
回复
code4app热心网友 2017-1-9 18:15:21
楼主用心了,内容非常精彩。
回复
提取码:  下载次数:374 状态:已购或VIP 售价:0(原价:10)金钱 下载权限:初级码农 
2296 0 374
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表