提到倒计时或者时进度条 现在总有很多种样式 上一次我们搞了双曲线波浪 进度
http://www.jianshu.com/p/7db295fd38eb(双曲线波浪)
今天我们搞一个环形的进度条
效果如图
6月-24-2016 11-15-58.gif
一, 思路分析
按照套路先来说一下 原理思路 如果已经看过上一篇 双曲线波浪的 ,那么对于这环形进度我感觉应该很简单.
1.首先得画个圆形 这是利用的 CoreGraphics搞一个曲线就好
2.利用定时器不停而刷新UI 调用 setNeedDisplay 方法
3.数字刷新.
二,代码分析
1.创建新类 继承与UIview .h 暴漏初始化方法 .m 实现初始话方法
- 实现画圆- (void)drawRect:(CGRect)rect
- (void)drawRect:(CGRect)rect{
CGContextRef context = UIGraphicsGetCurrentContext();//获取上下文对象 只要是用了 CoreGraPhics 就必须创建他
CGContextSetLineWidth(context, 5);//显然是设置线宽
CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);// 设置颜色
CGContextAddArc(context, self.frame.size.width/2.0, self.frame.size.height/2.0, self.bounds.size.width/2.0 - 5, 0 , self.count/500.0 * 2* M_PI, 0);//这就是画曲线了
/*
CGContextAddArc(上下文对象 , 圆心x, 圆心y, 曲线开始点, 曲线结束点, 半径);
*/
CGContextStrokePath(context);
}
- 通过上述方法可以顺利的画出圆 但是他没有动画效果,
接下来呢 我们添加动画效果 很简单 还是定时器
- (void)time{
self.timer = [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(action) userInfo:nil repeats:YES];
//这个应该就不用解释了
}
- (void)action{
self.count++;//时间累加
if (self.count == 500) {
//到达时间以后取消定时器
[self.timer invalidate];
self.timer = nil;
}
if (self.count%100 == 0) {
self.timeLabel.text = [NSString stringWithFormat:@"%ld",5 - self.count/100];
}
[self setNeedsDisplay];
}
可能你看到这里感觉 动画在哪了搞了 木有看到啊
解释一下 定时器 在改变 self.count
CGContextAddArc(context, self.frame.size.width/2.0, self.frame.size.height/2.0, self.bounds.size.width/2.0 - 5, 0 , self.count/500.0 * 2* M_PI, 0);//这就是画曲线了 可以看到结束点和self.count 成比例关系 所以每次刷新都会 改变终点
代码比较简单 就不搞代码上传啦
欢迎道友指点
