IOS Animation-貝塞爾曲線與Layer簡單篇（一）

IOS Animation-貝塞爾曲線與Layer簡單篇

swift篇

 

1.介紹

貝塞爾曲線：

　　貝塞爾曲線是計算機圖形圖像造型的基本工具，是圖形造型運用得最多的基本線條之一。它經過控制曲線上的四個點（起始點、終止點以及兩個相互分離的中間點）來創造、編輯圖形。

　　通常的矢量圖形軟件經過它來精確畫出曲線，貝茲曲線由線段與節點組成，節點是可拖動的支點，線段像可伸縮的皮筋，咱們在繪圖工具上看到的鋼筆工具就是來作這種矢量曲線的。

Layer：

　　CALayer(層)是屏幕上的一個矩形區域，在每個UIView中都包含一個根CALayer，在UIView上的全部視覺效果都是在這個Layer上進行的。Layer有不少種，最經常使用也是最基本的是CALayer。

　　Layer是處理‘繪製’的事情，把它想象成一個畫布。View至關於ps中的圖片，layer至關於圖片view的圖層。view是經過layer畫出的，view是layer的代理。

 

2.簡單代碼編寫

1）簡單在view上加一層layer。

1     func addSubLayer() {
2         let layer = CAShapeLayer();//定義一個layer
3         layer.frame = CGRectMake(100, 100, 150, 150);//座標
4         layer.backgroundColor = UIColor.blueColor().CGColor;//CG顏色
5         self.view.layer.addSublayer(layer);//在view上添加layer
6     }

2）經過賽貝爾曲線，畫一個矩形在layer上面

1     func addBezierWithRect() {
2         let layer = CAShapeLayer() //新建layer
3         let path = UIBezierPath.init(rect: CGRectMake(50, 80, 200, 100)) //初始化bezier曲線--矩形
4         layer.path = path.CGPath //在layer上賦予曲線的路徑
5         layer.fillColor = UIColor.clearColor().CGColor //layer的填充顏色
6         layer.strokeColor = UIColor.blueColor().CGColor //layer的邊框顏色     
7         self.view.layer.addSublayer(layer) //添加layer
8     }

3)畫一個圓角的矩形

 1     func addBezierWithRoundRect() {
 2         let layer = CAShapeLayer()
 3         let path = UIBezierPath.init(roundedRect: CGRectMake(100, 200, 150, 100), cornerRadius: 20) //定義圓角矩形
 4         layer.path = path.CGPath
 5         layer.fillColor = UIColor.clearColor().CGColor
 6         layer.strokeColor = UIColor.redColor().CGColor
 7         self.view.layer.addSublayer(layer)         
 8     }

4）畫一個圓形

1     func addBezierWithCircular() {
2         let layer = CAShapeLayer()
3         let circularPath = UIBezierPath(arcCenter: CGPoint.init(x: 200,y: 300), radius: 50, startAngle: 0, endAngle: CGFloat(2*M_PI), clockwise: true)//定義一個圓形
4         layer.path = circularPath.CGPath
5         layer.fillColor = UIColor.clearColor().CGColor
6         layer.strokeColor = UIColor.greenColor().CGColor
7         
8         self.view.layer.addSublayer(layer)
9     }

5)畫一條曲線

 1     func addBezierWithCurve() {
 2         let startPoint = CGPoint(x: 20, y: 200)//曲線開始位置
 3         let endPoint = CGPoint(x: 200, y: 200)//曲線終點位置
 4         let controlPoint = CGPoint(x: 50, y: 300)//曲線中間位置
 5         
 6         let layer = CAShapeLayer()
 7         let quxianPath = UIBezierPath()
 8         quxianPath.moveToPoint(startPoint) //首先移動到初始點
 9         quxianPath.addQuadCurveToPoint(endPoint, controlPoint: controlPoint) //定義終點點和中間點
10         layer.path = quxianPath.CGPath
11         layer.fillColor = UIColor.clearColor().CGColor
12         layer.strokeColor = UIColor.greenColor().CGColor
13         self.view.layer.addSublayer(layer)
14     }

 

 

若是想結合動畫來用，能夠看文章：CAShapeLayer、UIBezierPath與Animation的結合

 

能夠關注本人的公衆號，多年經驗的原創文章共享給你們。