提到倒計(jì)時(shí)或者時(shí)進(jìn)度條 現(xiàn)在總有很多種樣式 上一次我們搞了雙曲線波浪 進(jìn)度
http://www.itdecent.cn/p/7db295fd38eb(雙曲線波浪)
今天我們搞一個(gè)環(huán)形的進(jìn)度條
效果如圖
6月-24-2016 11-15-58.gif
一, 思路分析
按照套路先來說一下 原理思路 如果已經(jīng)看過上一篇 雙曲線波浪的 ,那么對于這環(huán)形進(jìn)度我感覺應(yīng)該很簡單.
1.首先得畫個(gè)圓形 這是利用的 CoreGraphics搞一個(gè)曲線就好
2.利用定時(shí)器不停而刷新UI 調(diào)用 setNeedDisplay 方法
3.數(shù)字刷新.
二,代碼分析
1.創(chuàng)建新類 繼承與UIview .h 暴漏初始化方法 .m 實(shí)現(xiàn)初始話方法
- 實(shí)現(xiàn)畫圓- (void)drawRect:(CGRect)rect
- (void)drawRect:(CGRect)rect{
CGContextRef context = UIGraphicsGetCurrentContext();//獲取上下文對象 只要是用了 CoreGraPhics 就必須創(chuàng)建他
CGContextSetLineWidth(context, 5);//顯然是設(shè)置線寬
CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);// 設(shè)置顏色
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, 曲線開始點(diǎn), 曲線結(jié)束點(diǎn), 半徑);
*/
CGContextStrokePath(context);
}
- 通過上述方法可以順利的畫出圓 但是他沒有動(dòng)畫效果,
接下來呢 我們添加動(dòng)畫效果 很簡單 還是定時(shí)器
- (void)time{
self.timer = [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(action) userInfo:nil repeats:YES];
//這個(gè)應(yīng)該就不用解釋了
}
- (void)action{
self.count++;//時(shí)間累加
if (self.count == 500) {
//到達(dá)時(shí)間以后取消定時(shí)器
[self.timer invalidate];
self.timer = nil;
}
if (self.count%100 == 0) {
self.timeLabel.text = [NSString stringWithFormat:@"%ld",5 - self.count/100];
}
[self setNeedsDisplay];
}
可能你看到這里感覺 動(dòng)畫在哪了搞了 木有看到啊
解釋一下 定時(shí)器 在改變 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);//這就是畫曲線了 可以看到結(jié)束點(diǎn)和self.count 成比例關(guān)系 所以每次刷新都會(huì) 改變終點(diǎn)
代碼比較簡單 就不搞代碼上傳啦
歡迎道友指點(diǎn)
