?

通過(guò)CAShapeLayer和貝塞爾曲線搭配的方法，創(chuàng)建的簡(jiǎn)單的圓形進(jìn)度條的教程
先簡(jiǎn)單的介紹下CAShapeLayer
1,CAShapeLayer繼承自CALayer，可使用CALayer的所有屬性
2,CAShapeLayer需要和貝塞爾曲線配合使用才有意義。
Shape：形狀
貝塞爾曲線可以為其提供形狀，而單獨(dú)使用CAShapeLayer是沒(méi)有任何意義的。
3,使用CAShapeLayer與貝塞爾曲線可以實(shí)現(xiàn)不在view的DrawRect方法中畫(huà)出一些想要的圖形

關(guān)于CAShapeLayer和DrawRect的比較
DrawRect：DrawRect屬于CoreGraphic框架，占用CPU，消耗性能大
CAShapeLayer：CAShapeLayer屬于CoreAnimation框架，通過(guò)GPU來(lái)渲染圖形，節(jié)省性能。動(dòng)畫(huà)渲染直接提交給手機(jī)GPU，不消耗內(nèi)存

貝塞爾曲線與CAShapeLayer的關(guān)系
1，CAShapeLayer中shape代表形狀的意思，所以需要形狀才能生效
2，貝塞爾曲線可以創(chuàng)建基于矢量的路徑
3，貝塞爾曲線給CAShapeLayer提供路徑，CAShapeLayer在提供的路徑中進(jìn)行渲染。路徑會(huì)閉環(huán)，所以繪制出了Shape
4，用于CAShapeLayer的貝塞爾曲線作為Path，其path是一個(gè)首尾相接的閉環(huán)的曲線，即使該貝塞爾曲線不是一個(gè)閉環(huán)的曲線

說(shuō)完了簡(jiǎn)介們來(lái)看一下如何創(chuàng)建一個(gè)簡(jiǎn)單的圓形進(jìn)度條

//創(chuàng)建全局屬性的ShapeLayer

@property(nonatomic, strong) CAShapeLayer *shapeLayer;

- (void)viewDidLoad {

????[superviewDidLoad];

????

????//創(chuàng)建出CAShapeLayer

????self.shapeLayer = [CAShapeLayer layer];

????self.shapeLayer.frame = CGRectMake(0, 0, 200, 200);//設(shè)置shapeLayer的尺寸和位置

????self.shapeLayer.position =?self.view.center;

????self.shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充顏色為ClearColor

????

????//設(shè)置線條的寬度和顏色

????self.shapeLayer.lineWidth = 1.0f;

????self.shapeLayer.strokeColor = [UIColor redColor].CGColor;

????

????//創(chuàng)建出圓形貝塞爾曲線

????UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];

????

????//讓貝塞爾曲線與CAShapeLayer產(chǎn)生聯(lián)系

????self.shapeLayer.path = circlePath.CGPath;

????

????//添加并顯示

????[self.view.layer addSublayer:self.shapeLayer];

}

這時(shí)候我們運(yùn)行下能看到會(huì)有一個(gè)圓

現(xiàn)在我們要用到CAShapeLayer的兩個(gè)參數(shù)，strokeEnd和strokeStart
Stroke:用筆畫(huà)的意思
在這里就是起始筆和結(jié)束筆的位置
Stroke為1的話就是一整圈，0.5就是半圈，0.25就是1/4圈。以此類推

如果我們把起點(diǎn)設(shè)為0，終點(diǎn)設(shè)為0.75

1 2 3

//設(shè)置stroke起始點(diǎn) self.shapeLayer.strokeStart = 0; self.shapeLayer.strokeEnd = 0.75;

看下運(yùn)行效果

起點(diǎn)和終點(diǎn)我們可以自己控制了，接下來(lái)我們?cè)趦r(jià)格定時(shí)器，就可以完成我們的圓形進(jìn)度條了
加個(gè)全局變量add，這是我們每次的遞增量

1 2 3 4

@interfaceViewController () { ????doubleadd; }

再寫個(gè)定時(shí)器

1 2 3 4 5 6 7

add = 0.1;//每次遞增0.1 //用定時(shí)器模擬數(shù)值輸入的情況 ????_timer = [NSTimerscheduledTimerWithTimeInterval:0.1 ??????????????????????????????????????????????target:self ????????????????????????????????????????????selector:@selector(circleAnimationTypeOne) ????????????????????????????????????????????userInfo:nil ?????????????????????????????????????????????repeats:YES];

定時(shí)器每次時(shí)間到了執(zhí)行的函數(shù)，這個(gè)比較簡(jiǎn)單就不解釋了

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; ????}elseif(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; ????} }

再來(lái)運(yùn)行下我們來(lái)看看效果

?

總結(jié)

以上是生活随笔為你收集整理的基于CAShapeLayer和贝塞尔曲线的圆形进度条动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。