?

通過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是一個首尾相接的閉環的曲線，即使該貝塞爾曲線不是一個閉環的曲線

說完了簡介們來看一下如何創建一個簡單的圓形進度條

//創建全局屬性的ShapeLayer

@property(nonatomic, strong) CAShapeLayer *shapeLayer;

- (void)viewDidLoad {

????[superviewDidLoad];

????

????//創建出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

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

再寫個定時器

1 2 3 4 5 6 7

add = 0.1;//每次遞增0.1 //用定時器模擬數值輸入的情況 ????_timer = [NSTimerscheduledTimerWithTimeInterval: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; ????}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; ????} }

再來運行下我們來看看效果

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。