iOS 開發教學 - 暸解 CALayer 2/2 ( iOS Development - An introduction to CALayer Part 2 )

在上一篇文章中提到了CALayer，也在文章中針對了 Layer 的定義與基本用法做了簡單的示範，但是其實 Layer 還有許多更進階的用法。因此，我想透過此篇文章繼續介紹 Layer 的其他應用，暸解本篇內容對於之後對於設定、控制 View 能更得心應手。最後，本篇文章是基於 Swift 4 的環境下進行。

Layer 可以有 Sub Layer

如同 View 可以增加 Sub View 一樣，Layer 也一樣可以擁有多個 Sub Layer，這代表了我們可以利用這些 Sub Layer 呈現一些比較複雜的視覺效果。我們先來撰寫一個簡單的範例來感受一下 Sub Layer，範例如下：

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 新增 View 並設定長寬為 200 x 200
        let myView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
        // 設定 View 的 Layer 背景顏色
        myView.layer.backgroundColor = UIColor.yellow.cgColor
        // 置中 View
        myView.center = CGPoint(x: self.view.center.x, y: self.view.center.y)
        // 將 View 加入畫面中
        self.view.addSubview(myView)

        // 新增一個額外的 CALayer
        let layer = CALayer()
        // 設定 Layer 長寬為 120 x 120
        layer.bounds = CGRect(x: 0, y: 0, width: 120, height: 120)
        // 設定 Layer 背景顏色
        layer.backgroundColor = UIColor.blue.cgColor
        // 置中 Layer
        layer.position = CGPoint(x: myView.bounds.midX, y: myView.bounds.midY)
        // 將 Layer 設定為 View 的 Sub Layer
        myView.layer.addSublayer(layer)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

完成後啟動 iOS 模擬器，畫面應該看起來如下圖：

沒錯，看起來就像一般的圖層重疊起來，那是因為在這個範例中我只簡單地增加一個 Sub Layer 並只設定背景顏色，這個範例只是讓你暸解 Sub Layer 的存在。一旦了解後，我們可以進一步深入 Layer 強大的功能：結合 CABasicAnimation。

---

替 Layer 增加動畫

接下來我們將要讓 Layer 活起來。除了之前提到的屬性可以設定外，我們還可以將 Layer 結合 CABasicAnimation。在這篇文章中，我們還是專注在 Layer 上，你目前只需要知道 CABasicAnimation 是一個產生動畫效果的物件。而 Layer 要如何使用它呢？以下的範例，我將會替 Layer 加入淡入淡出的效果，並重複 5 次。程式碼如下：

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 新增 View 並設定長寬為 200 x 200
        let myView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
        // 設定 View 的 Layer 背景顏色
        myView.layer.backgroundColor = UIColor.yellow.cgColor
        // 置中 View
        myView.center = CGPoint(x: self.view.center.x, y: self.view.center.y)
        // 將 View 加入畫面中
        self.view.addSubview(myView)

        // 新增 CABasicAnimation 物件，並設定 Opacity (透明度)屬性將會被操控
        let animation = CABasicAnimation(keyPath: "opacity")
        // 設定 Opacity 起始值
        animation.fromValue = 0
        // 設定 Opacity 最終值
        animation.toValue = 1
        // 設定動畫所需時間
        animation.duration = 3
        // 設定重複次數
        animation.repeatCount = 5
        animation.autoreverses = true
        // 將 CABasicAnimation 加入至 View 的 Layer 中
        myView.layer.add(animation, forKey: "opacity")
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

若按照上面的程式執行，你會看到淡入淡出的動畫效果。這邊就不將畫面貼上來了。透過上面的例子，你可以發現 Layer 加上 Sub Layer 並搭配 CABasicAnimation 可以完成更多特殊、強大的視覺效果。在接下來的文章中，我們將開始介紹更多元件，也會陸續提到 Layer 與 CABasicAnimation 相關的資料。

---

Environment :
  ・ macOS
  ・ Swift 4