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)