SwiftUI中AnyTransition的opacity动画不生效如何解决

问题场景 #

使用SwiftUI开发图片自动轮播功能，期望每张图片切换时附带opacity透明动画效果，已实现基础过渡逻辑，但opacity动画始终无法正常生效。

原有问题代码 #

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

效果对比 #

• 当前实际运行效果：
  
• 预期实现效果：
  

故障原因 #

动画不生效存在两个核心问题：

1. 修改currentImageIndex状态时，没有用withAnimation包裹状态变更，SwiftUI不会自动为这个状态变化触发过渡动画
2. 没有给Image视图设置唯一id，SwiftUI会判定这是同一个Image视图仅修改了图片资源，不会触发插入/移除的transition逻辑

修复方案 #

1. 将切换索引的逻辑放入withAnimation闭包中，明确指定动画时长和缓动效果
2. 给Image添加.id(currentImageIndex)修饰符，让SwiftUI可以根据索引区分不同的图片视图，正确触发插入移除过渡

修复后代码 #

import SwiftUI

struct EpilogueThree: View {
    let images = ["1", "2", "3"]
    let imageChangeTimer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
    // 仅需要淡入淡出效果可直接使用.opacity过渡，需要组合效果保留原有asymmetric写法即可
    let transition = AnyTransition.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()
                    .id(currentImageIndex) // 关键：给视图设置唯一标识，区分不同图片实例
                    .transition(transition)
                    .onReceive(imageChangeTimer) { _ in
                        if imagePage > 0 {
                            // 关键：用动画闭包包裹状态变更，触发过渡
                            withAnimation(.easeInOut(duration: 0.5)) {
                                self.currentImageIndex = (self.currentImageIndex + 1) % self.images.count
                                imagePage -= 1
                            }
                        }
                    }
            }
        }
    }
}

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

如果需要保留原有的slide+scale+opacity组合过渡，只需要把transition变量换回原来的asymmetric组合写法即可，动画会正常触发。

内容的提问来源于stack exchange，提问作者Learner_15