SwiftUI：視圖的顯示和隐藏動畫

SwiftUI最強大的功能之一是能夠自定義視圖的顯示和隐藏方式。以前，您已經了解了如何使用正常

if

條件有條件地包含視圖，這意味着當條件更改時，我們可以從視圖層次結構中插入或移除視圖。

轉換控制插入和删除的方式，我們可以使用内置轉換，以不同的方式組合它們，甚至建立完全自定義的轉換。

為了示範這一點，這裡有一個帶有按鈕和矩形的

VStack

：

struct ContentView: View {
    var body: some View {
        VStack {
            Button("Tap Me") {
                // do nothing
            }

            Rectangle()
                .fill(Color.red)
                .frame(width: 200, height: 200)
        }
    }
}           

複制

我們可以讓矩形隻有滿足一定的條件時才能出現。首先，我們添加一些可以操作的狀态：

@State private var isShowingRed = false           

複制

接下來，我們使用該狀态作為顯示矩形的條件：

if isShowingRed {
    Rectangle()
        .fill(Color.red)
        .frame(width: 200, height: 200)
}           

複制

最後，我們可以在按鈕的點選事件中将

isShowingRed

在“true”和“false”之間切換：

self.isShowingRed.toggle()           

複制

如果你運作程式，你會看到按下按鈕顯示或者隐藏紅色方塊。沒有動畫；它隻是突然出現和消失。

通過使用

withAnimation（）

包裝狀态更改，我們可以獲得SwiftUI的預設視圖轉換，如下所示：

withAnimation {
    self.isShowingRed.toggle()
}           

複制

有了這個小小的改變，應用程式現在淡入淡出紅色矩形，同時向上移動按鈕以騰出空間。看起來不錯，但是我們可以使用

transition()

修飾符做得更好。

例如，我們可以通過向矩形添加

transition()

修飾符使其上下縮放，如圖所示：

Rectangle()
    .fill(Color.red)
    .frame(width: 200, height: 200)
    .transition(.scale)           

複制

現在點選按鈕看起來好多了：當按鈕騰出空間時，矩形會放大，當再次點選時，矩形會縮小。(PS: 直接在Canvas運作效果可能有差别，是以還是在模拟器或者真機運作檢視實際效果吧)

如果你想嘗試的話，你可以嘗試一些其他的轉換。一個有用的方法是不對稱，它允許我們在顯示視圖時使用一個轉換，在視圖消失時使用另一個轉換。若要嘗試，請将矩形的現有過渡替換為：

.transition(.asymmetric(insertion: .scale, removal: .opacity))           

複制

譯自Showing and hiding views with transitions