image - 动画在 AnyTransition SwiftUI 上不起作用

Question

我目前在一个功能上使用 SwiftUI，其中图像列表会自动更改，并且每个图像都有不透明度动画。

虽然我目前已成功实现过渡，但无论我如何尝试，不透明动画都不起作用。

有人可以帮我解决这个问题吗...

我正在处理的代码如下:

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

当前代码的行为如下:

但是我想要的代码需要执行以下操作:

Answer 1

在这种情况下，我们可以通过添加id(新id - 新 View )来使图像可移动，并将动画添加到容器...以实现动画。

这是固定部分。使用 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 !!