第 50 章
使用 SwiftUI 動畫捲動視圖

在前面的章節中，我們介紹了一項 ScrollView 的新功能，它可以讓開發者輕鬆檢測滾動位置並實現向上（或向下）滾動的功能。 除了這個功能之外， SwiftUI 還引入了一個名為scrollTransition 的修飾器，它允許我們觀察視圖的轉換並套用各種動畫效果。

之前，我們建立了一個基本的滾動視圖。 讓我們繼續使用它作為範例。 作為參考，以下是建立滾動視圖的程式碼：

ScrollView {
    LazyVStack(spacing: 10) {
        ForEach(0...50, id: \.self) { index in

            bgColors[index % 5]
                .frame(height: 100)
                .overlay {
                    Text("\(index)")
                        .foregroundStyle(.white)
                        .font(.system(.title, weight: .bold))
                }
                .onTapGesture {
                    withAnimation {
                        scrollID = 0
                    }
                }
        }
    }
    .scrollTargetLayout()
}
.contentMargins(10.0, for: .scrollContent)
.scrollPosition(id: $scrollID)

使用 ScrollTransition 修飾器

滾動視圖中的轉換描述了子視圖出現或消失時應經歷的變化。 新的scrollTransition修飾器使我們能夠監視這些過渡並相應地應用不同的視覺和動畫效果。

為了示範它是如何運作的，讓我們修改上一節中的程式碼，將 scrollTransition 修飾器新增到顏色視圖。 這是更新後的程式碼：

想更深入學習SwiftUI和下載完整程式碼？你可以從 AppCoda網站購買《精通 SwiftUI》完整電子版。