Communitygithub.com

Apple 平台動畫

Apple 介面如何移動 — SwiftUI 的彈簧詞彙 (.smooth、.snappy、.bouncy) 及其適用時機、可中斷與手勢驅動的過渡、螢幕間的英雄/連續過渡、微互動與觸覺配對,以及尊重 Reduce Motion。適用於任何平台上需要模仿 Apple 風格的動畫場合。

Apple 平台動畫 是什麼?

此技能專注於 Apple 平台動畫的實作細節,幫助開發者在 Apple HIG 原則之外,精準掌握「如何」建構符合 Apple 風格的動畫。它涵蓋 SwiftUI 的彈簧詞彙(.smooth、.snappy、.bouncy)及其適用場景,並說明可中斷動畫、手勢驅動過渡、英雄/連續過渡,以及微互動與觸覺回饋的搭配。此外,也強調尊重 Reduce Motion 設定,並提供跨平台(如網頁 CSS 或 Framer Motion)的實作參考。此技能基於 SwiftUI API 及對 Apple 實際應用程式的觀察整理,清楚標示哪些是官方原則、哪些是 API 行為、哪些是觀察推論,避免將「觀察」誤認為規範。使用時應搭配 hig-guide(判斷「是否」動畫)及 ui-kit-for-apple-platforms(提供顏色、字體、控制幾何等測量值),三者分工明確。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/doppe7gangar/hig/tree/main/.claude/skills/motion-for-apple-platforms

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

Apple 動畫

HIG 將動畫作為原則來討論,並止步於此。它的「動畫」頁面有 92 行關於「是否」要製作動畫——有目的、可選、跟隨手勢——而沒有一個彈簧參數。關於動作實際上如何建構的一切都存在於它之外,這就是為什麼需要這份參考。

檔案內容
references/motion-animation.md彈簧詞彙、持續時間、過渡類型、可中斷性。
references/microinteractions-feedback.md按壓狀態、載入、成功與錯誤回饋、觸覺配對。
references/gestures-interaction.md滑動、拖曳、捏合、邊緣手勢,以及動畫應如何追蹤它們。

各項資訊的來源

值得直言不諱,因為三個來源的信譽度非常不同,混用它們就是動畫建議變成傳說的途徑:

  • 原則 → hig-guide 「有目的地加入動畫。」 「讓動畫成為可選項。」 「追求符合人們手勢與期望的真實回饋動畫。」 這些是 Apple 自己的話,來自 Motion。請引用這些原文,而非這裡的改寫。
  • 彈簧名稱及其行為 → SwiftUI 的 API .smooth、.snappy、.bouncy 是真實的 API,具有真實的預設值。motion-animation.md 中的彈跳百分比是對它們的描述,而非公佈的常數——將其視為一個你可以調整的起點,不要引用為 Apple 的規格。
  • 其他所有內容 → 觀察結果 這些參考資料改編自 MIT 授權的 apple-design-skills 集合(請參閱 LICENSE.txt 中的公告),在作者從實際應用程式中推斷行為的地方標記為 [observed]。有幫助,但非權威。

這裡沒有任何東西像 ui-kit-for-apple-platforms 的值那樣經過測量。這個區別是關鍵:動畫是此儲存庫中背後有最少「可靠資料」的部分。

選擇彈簧

這個決定影響了大部分的感覺:

彈簧彈跳用途
.smooth無工作表、模態、背景切換——任何應該安靜地穩定下來而不引起注意的動畫
.snappy輕微按鈕按壓、切換開關、選取——直接操作的預設值
.bouncy明顯圖示按壓、到來的通知、旨在讓人感到回饋感的時刻

彈跳是完整的訊號。一個會彈跳的工作表看起來像玩具;一個不會彈跳的按鈕按壓看起來像死掉一樣。把這一個選擇做對,比調整持續時間更有用。

Apple 動畫與一般動畫的不同

  • 可中斷。 手勢必須能夠在中途反轉或重新導向正在進行的動畫,而不是排隊等待它完成。任何必須完成後才能回應的東西,無論多快都會感覺延遲。
  • 追蹤手指,然後接管。 在拖曳過程中,表面會 1:1 地跟隨手勢;彈簧僅在釋放時接管,並帶入手勢當時的速度。這是將 HIG 的「符合人們手勢與期望的真實回饋動畫」具體化。
  • 持續時間是結果,不是輸入。 彈簧由物理特性決定,並在穩定時穩定下來。使用固定的 300 毫秒通常意味著選錯了工具。
  • 位置與不透明度,而非大小與顏色。 移動與淡入淡出讀起來像物理;縮放與重新著色讀起來像特效。

Reduce Motion 不是可選項

hig-guide 明確說明——「讓動畫成為可選項。」 在網路上這對應 prefers-reduced-motion,它的意思是「取代」動作,而不僅僅是縮短它:使用交叉淡入淡出取代滑動,使用「直接切換」取代動畫。ui-kit-for-apple-platforms 的 ios-components.css 已經以這種方式保護它自己的轉場;請與它保持一致。

界限

  • 數值——顏色、字體、控制幾何、材質——屬於 ui-kit-for-apple-platforms,從 Apple 的 UI 套件中測量而來。請勿在此重複;動畫檔案中的十六進位色碼,就是一個會在沒人注意的地方過時的色碼。
  • 關於「是否」應該動畫、該使用哪種呈現方式、版面如何適應的規則——hig-guide,並附上實際的引用。
  • 此技能涵蓋的是「如何」建構動作本身。

相關技能