從 SF Symbols App 研究 SF Symbol 的動畫效果— iOS 17 新功能
從 iOS 17 開始,只要一行程式即可為 SF Symbol 添加活潑的動畫效果。在研究程式前,我們可以先用 SF Symbols App 認識 SF Symbol 各種生動的動畫效果。
以下我們以 wifi symbol 為例。
切換到 Animation Inspector 分頁,點選 Preview 可預覽動畫效果。
從 Animation 欄位選擇動畫效果。
- Appear(出現)。
- Bounce(彈跳)。
- Scale(縮放)。
- Wiggle(擺動、iOS 18 以上)。
- Rotate(旋轉、iOS 18 以上)。
- Breathe(呼吸,包含縮放和淡入淡出、iOS 18 以上)。
- Pulse(脈衝,淡入淡出)。
- Variable Color(照順序調整不同 layer 的透明度。)
- Replace(取代,換新的圖案)。
- Disappear(消失)。
其中 Wiggle、Breathe、Rotate 是 iOS 18 新增的動畫效果,Replace 則在 iOS 18 進化成效果更好的 Magic Replace。
每種動畫可做不同的設定,以 Wiggle 動畫為例,我們可設定整個擺動(Whole Symbol) 或依 layer 擺動(By Layer)。
Wiggle 也可從 Direction 設定動畫的方向,預設是水平擺動,可調整為上下左右、順時針、逆時針和任意的角度。
設計好不錯的效果後,點選下圖黃色框框的按鈕可生成對應的 Swift / Objective-C 程式。
比方上圖的效果將產生以下 Swift 程式。
.wiggle.up.byLayer
之後在 SwiftUI / UIKit 程式設定 SF Symbol 動畫時,可在呼叫 symbolEffect / addSymbolEffect
時傳入 .wiggle.up.byLayer
。
從下圖的 Repeat 按鈕可設定動畫重覆的次數。
以下示範 Rotate 動畫的效果。
- Once。
轉一次。
- Repeat with Delay。
無限旋轉,每次轉完一圈會稍微停頓再轉下一圈。
- Continuous(連續)。
無限旋轉且中間不停頓。
認識 SF Symbol 的動畫效果後,有興趣的朋友可進一步研究如何在 SwiftUI & UIKit 實現 SF Symbol 動畫。