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

    提到倒计时或者时进度条 现在总有很多种样式 上一次我们搞了双曲线波浪 进度http://www.jianshu.c...

  • 倒计时

    ios怎么在cell上添加倒计时 iOS中 简单易懂的秒杀倒计时/倒计时 iOS开发-三种倒计时的写法 iOS实现...

  • canvas环形倒计时组件

    效果如下图一: Canvas环形倒计时组件 Canvas环形倒计时是基于Canvas实现的倒计时,建议于移动端使用...

  • 环形倒计时

    以前项目中有一个小小的需求,是圆形倒计时view,话不多说请看图  怎么实现这样的需求了? 圆形可以通过贝塞尔曲线...

  • svg动画(二)

    1.目标 实现一个环形倒计时的动画。 2.具体操作 2.1 画一个环形 上代码: 最后的效果图: 2.1.1 代码...

  • iOS绘制一个简单的环形进度条

    环形进度条 一个简单的环形进度组件。 用UIBezierPath + CAShaperLayer绘制 1、由于使用...

  • iOS 环形进度

    效果环形进度 CircleProgressView.h CircleProgressView.m 实现

  • 【iOS】环形进度动画

    最近朋友项目中用到环形进度动画,于是就写了一个简单的 Demo。下面简单介绍一下实现过程。 要想封装一个带有环形进...

  • ios简单的倒计时实现

    /** * 获取当天的年月日的字符串 * 这里测试用 * @return 格式为年-月-日 时分秒 */ -(NS...

  • Java泛型:循环形参(recursive type param

    简单的泛型循环形参 方法定义中用到了泛型中循环形参表示法>,按Ef...

网友评论

本文标题:iOS 简单的环形倒计时

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