iOS 简单的环形倒计时

提到倒计时或者时进度条 现在总有很多种样式 上一次我们搞了双曲线波浪 进度
http://www.jianshu.com/p/7db295fd38eb(双曲线波浪)
今天我们搞一个环形的进度条
效果如图

iOS 简单的环形倒计时_第1张图片
6月-24-2016 11-15-58.gif

一, 思路分析
按照套路先来说一下 原理思路 如果已经看过上一篇 双曲线波浪的 ,那么对于这环形进度我感觉应该很简单.
1.首先得画个圆形 这是利用的 CoreGraphics搞一个曲线就好
2.利用定时器不停而刷新UI 调用 setNeedDisplay 方法
3.数字刷新.

二,代码分析
1.创建新类 继承与UIview .h 暴漏初始化方法 .m 实现初始话方法

  1. 实现画圆- (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);
}

  1. 通过上述方法可以顺利的画出圆 但是他没有动画效果,
    接下来呢 我们添加动画效果 很简单 还是定时器
- (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 成比例关系  所以每次刷新都会 改变终点

代码比较简单 就不搞代码上传啦
欢迎道友指点

你可能感兴趣的:(iOS 简单的环形倒计时)