SwiftUI：將動畫附加到過渡

Question

根據 Apple 文檔，我們應該能夠將動畫直接附加到過渡。 例如：

.transition(AnyTransition.slide.animation(.linear))

該方法的文檔：

extension AnyTransition {

    /// Attach an animation to this transition.
    public func animation(_ animation: Animation?) -> AnyTransition
}

說：

概括

將動畫附加到此過渡。

但我無法讓它發揮作用。 看看這個最小可行的例子（你可以復制粘貼它並自己嘗試）：

import SwiftUI

struct AnimationTest: View {
    @State private var show = false
    var body: some View {
        VStack {
            if show {
                Color.green
                    .transition(AnyTransition.slide.animation(.linear))
            } else {
                Color.yellow
                    .transition(AnyTransition.slide.animation(.linear))
            }
            Button(action: {
                self.show.toggle()
            }, label: {
                Text("CHANGE VIEW!")
            })
        }
    }
}

struct AnimationTest_Previews: PreviewProvider {
    static var previews: some View {
        AnimationTest()
    }
}

如您所見，根本沒有動畫發生。 有任何想法嗎？ 謝謝你。

Answer 1

您需要將布爾切換包裝在withAnimation()閉包中：

withAnimation {
    self.show.toggle()
}

在模擬器上測試了在 Xcode 11.2.1 上工作的過渡； 畫布不預覽它。

請注意，直接應用於視圖的動畫/過渡會對該特定視圖及其子視圖產生影響。 此外，根據文檔：

func animation(Animation?) -> View

將給定的動畫應用於視圖中的所有動畫值。

由於可動畫值（在本例中為啟用過渡的 Bool 切換）在 Color 視圖的外部，因此必須從按鈕操作中設置的位置顯式設置動畫。 或者，可以有效地將過渡直接附加到目標視圖，但將動畫應用到它們的容器，從而實現更改的插值以show . 所以，這也達到了預期的結果：

struct AnimationTest: View {
    @State private var show = false
    var body: some View {
        VStack {
            if show {
                Color.green
                    .transition(.slide)
            } else {
                Color.yellow
                    .transition(.slide)
            }
            Button(action: {
                self.show.toggle()
            }, label: {
                Text("CHANGE VIEW!")
            })
        }
        .animation(.linear)
    }
}

Answer 2

這些修改器僅指定過渡期間要使用的動畫種類，而不會激活它們。 您需要顯式激活動畫。 就你而言

withAnimation {
    self.show.toggle()
}

注意：轉換在預覽版，模擬器或真實設備上的測試中不起作用。