---
title: AnimatedSplash
tags: 簡報, 研究, APP 組, iOS, Swift
GA: UA-54884750-6
---

## AnimatedSplash 是什麼？
---
其實這個功能是透過 **CALayer** 以及 **CAKeyframeAnimation** 來實作，簡單來說，CALayer 是比 **UIKit** 更底層的存在。而 CALayer 是用來在圖層上遮色片，CAKeyframeAnimation 是用來做動畫。

---

## 參考資料：
- CALayer: https://developer.apple.com/documentation/quartzcore/calayer
- CAKeyframeAnimation: https://developer.apple.com/documentation/quartzcore/cakeyframeanimation

---

## CALayer 的可用參數/屬性
---
- anchorPoint: 圖層描點，範圍 0 ~ 1，從哪裡開始繪畫的意思。預設 0.5, 0.5。
- backgroundColor: 背景顏色
- borderColor: 邊框顏色
- borderWidth: 邊框寬度
- bounds: 圖層大小
- contents: 圖層內容
- contentsRect: 圖層顯示內容的大小與位置
- cornerRadius: 圓角半徑
- doubleSided:
- frame: 圖層大小與位置，但通常使用 bounds 和 position 代替，因 frame 不支援動畫效果
- hidden: 是否隱藏
- mask: 圖層遮罩
- maskToBounds: 子圖層是否裁切圖層邊界
- opacity: 透明度
- position: 圖層位置
- shadowColor: 陰影顏色
- shadowOffset: 陰影偏移
- shadowOpacity: 陰影透明度
- shadowPath: 陰影形狀
- shadowRadius: 陰影模糊半徑
- sublayers: 子圖層
- sublayerTransform: 子圖層形變
- transform: 圖層形變

---

## CALayer.anchorPoint
---
圖層描點，範圍 0 ~ 1，從哪裡開始繪畫的意思。預設 0.5, 0.5。

---

## CAKeyframeAnimation 的可用參數/屬性
---
- values: 關鍵幀（關鍵影格），動畫會在指定的時間內一次顯示 value 陣列的每一個關鍵影格。
- timingFunctions: 在關鍵影格的移動要如何移動。如果定義了 n 個關鍵影格，那就要提供 n-1 個 CAMediaTimingFunction。
- keyTimes: 關鍵影格的對應時間點，範圍 0 ~ 1。如果沒有設定就是各影格平分時間。
- duration: 動畫總時間。
- beginTime: 要何時開始這個動畫。

---

## CAKeyframeAnimation.value
---
關鍵幀（關鍵影格），動畫會在指定的時間內一次顯示 value 陣列中的每一個關鍵影格。
需要注意的是有些數值可以直接加到陣列中，有些需要在加入之前先包裝過。
例如：
- CGRect（例如 bounds 或 frame）應該包裝成 NSValue
- layer 的 transform 需要包裝每一個 CATransform3D 為 NSValue
- borderColor 需要把 CGColorRef 包裝成 id
- CGFloat 需要包裝成 NSNumber
- layer 的 contents 需要包裝成 CGImageRef
- CGPoint 可以使用 NSValue 包裝，也可以使用 CGPathRef 路徑包裝。

---

## CAKeyframeAnimation.timingFunctions
---
在關鍵影格的移動要如何移動。如果定義了 n 個關鍵影格，那就要提供 n-1 個 CAMediaTimingFunction。

---

最後，當動畫結束的時候，將 mask 設為 nil，推測是用來將 mask 關閉（取消）
但由於在我的模擬器上沒有正常呈現，因此我無法肯定。
但是不加入這一段，ViewController 就不能被指定 delegate

extension ViewController : CAAnimationDelegate {
    func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
        self.imageView.layer.mask = nil
    }
}