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

Question

I have two images, ImageA and ImageB , and my goal is to animate a transition between them in the following manner:

1. ImageA is loaded
2. Pause for 1 second
3. ImageA transitions to ImageB , with a duration of 1.5 seconds

With regular Swift, it would be using an UIView.animate closure with an animation duration and a pause.

Here is my attempt with SwiftUI, which is not showing a smooth transition, but a hard image change instead:

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()
            }
            
        }

What is missing in my implementation to animate the image transition?

Edit: the entire codebase can be found here: TestWidget Github

Answer 1

You have to add withAnimation() { ... } wrapper around observed changes, which you want to be animated.

Change your code to

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

Answer 2

You don't specify which kind of transition do you want, by default SwiftUI uses opacity...

Try the following

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)