Description:
前幾天看到工作室的夥伴用 CAShapeLayer 來畫了一個圓，讓我感到好奇於是去研究了一下它的功能。
玩了一下發現不只能用來畫圓還能畫一些不規則的圖形甚至到一些有趣的動畫效果。

Component:
這個 demo 中會用到的 Swift 元件如下：

1. CAShapeLayer
2. UIBezierPath

Highlight function：
為了讓畫出的線能夠彎曲，先設定好四個座標點分別是起始點及結束點和兩個控制點：

let startPoint = CGPoint(x: 50, y: 300)
let endPoint = CGPoint(x: 300, y: 300)
let controlPoint1 = CGPoint(x: 170, y: 200)
let controlPoint2 = CGPoint(x: 200, y: 500)

接下來需要用到 Bezier 曲線，在這邊的兩個控制點是用來控制曲線的斜率並不是曲線上會經過的點， Bezier 曲線的定義請參考 reference，方式如下：

let path = UIBezierPath()
path.move(to: startPoint)
path.addCurve(to: endPoint, controlPoint1: controlPoint1, controlPoint2: controlPoint2)

設定好 Bezier 曲線後下一步就是要把曲線顯示在畫面上，顯示的方式是透過 CAShapeLayer() 中的 path property:

let layer = CAShapeLayer()
layer.path = path.cgPath
view.layer.addSublayer(layer)

做完上述步驟後即可得到一個三次 Bezier 曲線。

該是時候加上動畫效果了， 要讓剛剛完成的曲線能像 demo 那樣有筆畫的效果需透過 CABasicAnimation() 來達成：

let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.fromValue = 0
animation.toValue = 1
animation.repeatCount = 3 // repeat times
animation.duration = 10  // duration times in seconds
layer.add(animation, forKey: "")

CABasicAnimation() 中的 fromValue 及 toValue 這兩個 property 很有意思。它們可以是一個選定範圍(0 ~ 1)或是用來表示兩種顏色的漸進，可參考 reference 中 CABasicAnimation 的解釋。在這邊我是使用畫出從startPoint(0) 到 endPoint(1) 的完整曲線。
在 CABasicAnimation initialization 時會傳入一個 keyPath 的參數，此參數是用來決定要使用哪一種動畫效果。在這邊所看到的 demo 其實是結合了兩種動畫效果：strokeEnd 和 lineWidth，詳細的動畫效果請參考 animation property。

Reference：
Bezier Curve
CABasicAnimation
Animation property
Source code on Github