动画在 AnyTransition SwiftUI 上不起作用

学习者_15

我目前在一个函数上使用 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)
    }
}

当前代码的行为如下：

但是我想要的代码需要做这样的事情：

粗糙的

id在这种情况下，我们可以通过添加（新id- 新视图）并将动画添加到容器中来使图像可移动......用于动画。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。