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

- daspianist

Answer 1

您没有说明需要哪种过渡效果，默认情况下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)

- Asperi

---

谢谢分享这个。这看起来很有前途，但不幸的是结果一样：在图像更改之间没有动画（我取消了代码中的两个.transition()注释）。我已经上传了整个代码库并更新了问题描述。 - daspianist

我错过了这是小部件...它在小部件中不起作用 - 它是静态呈现的。 - Asperi

我明白了 - 这解释了一切。感谢你分享你的见解。 - daspianist

Answer 2

你需要在希望进行动画的被观察更改周围添加withAnimation() { ... }包装器。

将你的代码更改为：

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

- Gabriel Balta

---

谢谢您的建议。我添加了 withAnimation()，但图像转换仍然没有显示动画，而是突然变化。我还更新了问题正文中的代码。 - daspianist