iOS 简单的环形倒计时

作者: 健健锅 | 来源:发表于2016-06-24 11:37 被阅读4146次

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

    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 简单的环形倒计时

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