原文鏈接 http://blog.it985.com/16042.html
初次接觸CAShapeLayer和貝塞爾曲線，看了下極客學院的視頻。對初學者來說感覺還不錯。今天來說一個通過CAShapeLayer和貝塞爾曲線搭配的方法，創建的簡單的圓形進度條的教程
先簡單的介紹下CAShapeLayer
1,CAShapeLayer繼承自CALayer，可使用CALayer的所有屬性
2,CAShapeLayer需要和貝塞爾曲線配合使用纔有意義。
Shape：形狀
貝塞爾曲線可以爲其提供形狀，而單獨使用CAShapeLayer是沒有任何意義的。
3,使用CAShapeLayer與貝塞爾曲線可以實現不在view的DrawRect方法中畫出一些想要的圖形
關於CAShapeLayer和DrawRect的比較
DrawRect：DrawRect屬於CoreGraphic框架，佔用CPU，消耗性能大
CAShapeLayer：CAShapeLayer屬於CoreAnimation框架，通過GPU來渲染圖形，節省性能。動畫渲染直接提交給手機GPU，不消耗內存
貝塞爾曲線與CAShapeLayer的關係
1，CAShapeLayer中shape代表形狀的意思，所以需要形狀才能生效
2，貝塞爾曲線可以創建基於矢量的路徑
3，貝塞爾曲線給CAShapeLayer提供路徑，CAShapeLayer在提供的路徑中進行渲染。路徑會閉環，所以繪製出了Shape
4，用於CAShapeLayer的貝塞爾曲線作爲Path，其path是一個首尾相接的閉環的曲線，即使該貝塞爾曲線不是一個閉環的曲線
說完了簡介們來看一下如何創建一個簡單的圓形進度條
|
1
2
|
//創建全局屬性的ShapeLayer@property
(nonatomic, strong) CAShapeLayer *shapeLayer; |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
- (void)viewDidLoad { [super
viewDidLoad]; //創建出CAShapeLayer self.shapeLayer = [CAShapeLayer layer]; self.shapeLayer.frame = CGRectMake(0, 0, 200, 200);//設置shapeLayer的尺寸和位置 self.shapeLayer.position = self.view.center; self.shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充顏色爲ClearColor //設置線條的寬度和顏色 self.shapeLayer.lineWidth = 1.0f; self.shapeLayer.strokeColor = [UIColor redColor].CGColor; //創建出圓形貝塞爾曲線 UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)]; //讓貝塞爾曲線與CAShapeLayer產生聯繫 self.shapeLayer.path = circlePath.CGPath; //添加並顯示 [self.view.layer
addSublayer:self.shapeLayer];} |
這時候我們運行下能看到會有一個圓
現在我們要用到CAShapeLayer的兩個參數，strokeEnd和strokeStart
Stroke:用筆畫的意思
在這裏就是起始筆和結束筆的位置
Stroke爲1的話就是一整圈，0.5就是半圈，0.25就是1/4圈。以此類推
如果我們把起點設爲0，終點設爲0.75
|
1
2
3
|
//設置stroke起始點self.shapeLayer.strokeStart = 0;self.shapeLayer.strokeEnd = 0.75; |
看下運行效果
起點和終點我們可以自己控制了，接下來我們在價格定時器，就可以完成我們的圓形進度條了
加個全局變量add，這是我們每次的遞增量
|
1
2
3
4
|
@interface
ViewController (){ double
add;} |
再寫個定時器
|
1
2
3
4
5
6
7
|
add = 0.1;//每次遞增0.1//用定時器模擬數值輸入的情況 _timer = [NSTimer
scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(circleAnimationTypeOne) userInfo:nil repeats:YES]; |
定時器每次時間到了執行的函數，這個比較簡單就不解釋了
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
- (void)circleAnimationTypeOne{ if
(self.shapeLayer.strokeEnd > 1 && self.shapeLayer.strokeStart
< 1) { self.shapeLayer.strokeStart += add; }else
if(self.shapeLayer.strokeStart == 0){ self.shapeLayer.strokeEnd += add; } if
(self.shapeLayer.strokeEnd == 0) { self.shapeLayer.strokeStart = 0; } if
(self.shapeLayer.strokeStart == self.shapeLayer.strokeEnd)
{ self.shapeLayer.strokeEnd = 0; }} |
再來運行下我們來看看效果