從 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 動畫。

利用 SwiftUI 的 symbolEffect 實現 SF Symbol 動畫

利用 UIKit 的 addSymbolEffect 實現 SF Symbol 動畫

參考連結

--

--

彼得潘的 iOS App Neverland
彼得潘的 Swift iOS App 開發問題解答集

彼得潘的iOS App程式設計入門,文組生的iOS App程式設計入門講師,彼得潘的 Swift 程式設計入門,App程式設計入門作者,http://apppeterpan.strikingly.com