從 SF Symbols App 研究 SF Symbol 的動畫效果— iOS 17 新功能

從 iOS 17 開始，只要一行程式即可為 SF Symbol 添加活潑的動畫效果。在研究程式前，我們可以先用 SF Symbols App 認識 SF Symbol 各種生動的動畫效果。

SF Symbols - Apple Developer

以下我們以 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 動畫。

利用 SwiftUI 的 symbolEffect 實現 SF Symbol 動畫

利用 SwiftUI 的 symbolEffect 實現 SF Symbol 動畫 — iOS 17 新功能

利用 UIKit 的 addSymbolEffect 實現 SF Symbol 動畫

利用 UIKit 的 addSymbolEffect 實現 SF Symbol 動畫 — iOS 17 新功能

參考連結

Animate symbols in your app - WWDC23 - Videos - Apple Developer