Question

我有两个图像ImageA和ImageB，我的目标是以以下方式为它们之间的过渡设置动画：

ImageA已加载
暂停1秒
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)

SwiftUI：如何使用延迟为两个图像之间的过渡设置动画？

2 个答案: