Animation doesn't work on AnyTransition SwiftUI

Question

I'm currently using SwiftUI on a function where a list of images change automatically with opacity animation for each image.

While I've currently managed to get a transition going, the opacity animation does not work no matter what I try.

Could someone please help me out with this...

The code I'm working on is as follows:

//
//  EpilogueThree.swift
//

import SwiftUI

struct EpilogueThree: View {
    let images = ["1", "2", "3"]
    let imageChangeTimer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
    let transition = AnyTransition.asymmetric(insertion: .slide, removal: .scale).combined(with: .opacity)
    @State private var imagePage = 2
    @State private var currentImageIndex = 0
    var body: some View {
        ZStack {
            VStack {
                Text("Page: \(imagePage)")
                    .font(.largeTitle)
                    .foregroundColor(.white)
                    .padding(.horizontal, 20)
                    .padding(.vertical, 5)
                    .background(.black.opacity(0.75))
                Image(images[currentImageIndex])
                    .resizable()
                    .ignoresSafeArea()
                    .transition(transition)
                    .onReceive(imageChangeTimer) { _ in
                        if imagePage > 0 {
                            self.currentImageIndex = (self.currentImageIndex + 1) % self.images.count
                            imagePage -= 1
                        }
                    }
            }
        }
    }
}

struct EpilogueThree_Previews: PreviewProvider {
    static var previews: some View {
        EpilogueThree()
            .previewInterfaceOrientation(.landscapeRight)
    }
}

The current code acts something like this:

But the code I want needs to do something like this:

Transition is used on view insert/remove from parent, but in provided view the Image is persistent, so transition has no effect. What behaving do you try to achieve? — Asperi, Jun 12 '22 at 09:59
Hmm... I want to have a fade-in and fade-out effect for each image when it changes into another image... The current code changes the image without any effect. It would be really helpful if you could help me out with this... — Learner_15, Jun 12 '22 at 10:04
@Asperi I've edited my post and inserted how the code is currently acting, and what behaviour I would like it to achieve. — Learner_15, Jun 12 '22 at 10:17

score 2 · Accepted Answer · answered Jun 12 '22 at 10:35

We can make image removable in this case by add id (new id - new view) and add animation to container... for animation.

Here is fixed part. Tested with Xcode 13.4 / iOS 15.5

VStack {

// .. other code

    Image(images[currentImageIndex])
        .resizable()
        .ignoresSafeArea()
        .id(imagePage)           // << here !!
        .transition(transition)
        .onReceive(imageChangeTimer) { _ in
            if imagePage > 0 {
                self.currentImageIndex = (self.currentImageIndex + 1) % self.images.count
                imagePage -= 1
            }
        }
}
.animation(.default, value: imagePage)  // << here !!

Wow this is simply amazing! I didn't know there was something called an `id` function. Thank you very much! — Learner_15, Jun 12 '22 at 13:53

Animation doesn't work on AnyTransition SwiftUI

1 Answers1