SwiftUI：如何使用延遲為兩個圖像之間的過渡設置動畫？

Question

我有兩個圖像ImageA和ImageB ，我的目標是通過以下方式為它們之間的過渡設置動畫：

1. ImageA已加載
2. 暫停 1 秒
3. ImageA轉換為ImageB ，持續時間為 1.5 秒

使用常規 Swift，它將使用帶有動畫持續時間和暫停的UIView.animate閉包。

這是我對 SwiftUI 的嘗試，它沒有顯示平滑的過渡，而是硬圖像更改：

VStack(alignment: .leading, spacing: 0) {
            Image(images.randomElement()!)
                    .resizable()
                    .scaledToFill()
                    .onAppear {
                        DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
                        withAnimation() { //added
                            self.shouldTransition.toggle()
                        }
                    }
                    
            if shouldTransition {
                Image(images.randomElement()!)
                        .resizable()
                        .animation(.easeInOut(duration: 1.5))
                        .scaledToFill()
            }
            
        }

我的實現中缺少什么來為圖像過渡設置動畫？

編輯：整個代碼庫可以在這里找到： TestWidget Github

Answer 1

您必須在觀察到的變化周圍添加withAnimation() { ... }包裝器，您希望對其進行動畫處理。

將您的代碼更改為

DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
                                withAnimation(){
                                self.shouldTransition.toggle()
                                }
                            }

Answer 2

您沒有指定您想要哪種過渡，默認情況下 SwiftUI 使用不透明度...

嘗試以下

VStack(alignment: .leading, spacing: 0) {
    if !shouldTransition {
        Image(images.randomElement()!)
            .resizable()
            .scaledToFill()
            .onAppear {
                DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
                    self.shouldTransition.toggle()
                }
            }
            //.transition(.move(edge: .top))      // uncomment to modify transition
    }

    if shouldTransition {
        Image(images.randomElement()!)
            .resizable()
            .scaledToFill()
            //.transition(.move(edge: .top))      // uncomment to modify transition
    }
    
}.animation(.easeInOut(duration: 1.5), value: shouldTransition)