Skip to main content
Language繁體中文
工程5 分鐘閱讀2026 年 10 月

SwiftUI 中的彈簧動畫如何運作?

簡短回答

在 SwiftUI 中,您可以使用 .animation(.spring) 或 withAnimation(.spring) 來增加彈簧。從 iOS 17 開始,主要設定是持續時間和彈跳,並且有預設:.smooth(無彈跳)、.snappy(一點)和 .bouncy(更多)。較舊的代碼使用響應和阻尼分數。當新動畫中斷時,SwiftUI 彈簧會保持其速度,這使得手勢感覺很自然。

核心要點

  • 使用 withAnimation(.spring) 進行狀態更改,或在視圖上使用 .animation(.spring, value:)
  • iOS 17+:.spring(duration:bounce:) 加上 .smooth、.snappy 和 .bouncy 預設
  • 舊 API:.spring(response:dampingFraction:blendDuration:)
  • 自 iOS 17 起,彈簧是 SwiftUI 的預設動畫樣式
  • 斷斷續續彈簧保持其速度,因此手勢可以順利傳遞

SwiftUI 以動畫形式呈現狀態變化。當 isExpanded 之類的值在 withAnimation(.spring) 中發生變化時,依賴它的每個視圖都會使用 spring 移動到新的佈局。

在 iOS 17 及更高版本中,描述彈簧最簡單的方法是使用兩個值:持續時間,即穩定所需的大致時間;以及彈跳,即超出的程度。彈跳為 0 可實現平滑運動,不會出現過衝;較高的值會增加彈跳力。 Apple 也提供預設:.smooth、.snappy 和 .bouncy。

較舊的程式碼使用 .spring(response:dampingFraction:)。反應與持續時間類似,阻尼分數為 1 表示沒有反彈,而較低的值會增加反彈。兩種形式都描述了相同的物理彈簧。

彈簧的一大優點是中斷。如果使用者再次點擊或拖曳手勢在動畫中結束,新的彈簧將從當前位置和速度開始,因此不會發生跳躍。對於拖曳手勢,當使用者釋放時傳遞手勢的速度,以便元素繼續沿著其拋出的方向移動。

如果相同元件還需要在 Web 或 Android 上運行,則將彈簧值保留為共用運動代幣會有所幫助。我們製作的 ExodeUI 具有 SwiftUI 運行時,因此帶有彈簧的設計組件可以在 SwiftUI 和其他平台上運行。

常見問題

SwiftUI中的預設動畫是什麼?

從 iOS 17 開始,預設動畫是平滑的彈簧。

.snappy 和 .bouncy 有什麼不同?

.snappy 很快就穩定下來,並有一個小超調; .bouncy 超調更多。 .smooth 沒有超調。

如何將響應和阻尼分數轉換為持續時間和彈跳?

響應大致映射到持續時間。阻尼分數為 1 時彈跳為 0;較低的阻尼分數意味著更多的彈跳。

如何透過拖曳手勢添加速度?

當拖曳結束時讀取速度並使用插值彈簧或接受初始速度的較新彈簧 API。

相關指南和範例

在編寫程式碼之前調整彈簧

拖曳滑塊,觀察運動,並複製 SwiftUI、CSS 和其他平台的彈簧值。

打開彈簧發生器
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →