SwiftUI如何实现新视图淡入覆盖旧视图而非交叉淡入效果？

需求说明 #

默认SwiftUI的视图转场使用.opacity动画，切换时新旧视图会交叉淡入淡出，出现半透明叠加的状态。我们需要实现：

• 新视图淡入覆盖旧视图
• 旧视图全程保持100%不透明度，仅在转场结束后消失
• 避免用ZStack永久保留旧视图（防止无用视图持续被合成）

解决方案 #

通过自定义不对称转场，分别设置视图插入和移除时的动画逻辑：

• 插入新视图时：执行淡入动画（.opacity）
• 移除旧视图时：使用.identity无动画，让旧视图保持不透明直到转场完成后直接被移除

代码示例 #

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    let transaction = Transaction(animation: .linear(duration: 10))
    let imageURL = URL(string: "https://www.nasa.gov/sites/default/files/thumbnails/image/main_image_star-forming_region_carina_nircam_final-5mb.jpg")!
    
    // 自定义不对称转场：新视图淡入，旧视图无移除动画
    var overlayFadeTransition: AnyTransition {
        .asymmetric(
            insertion: .opacity,
            removal: .identity
        )
    }
    
    var body: some View {
        VStack(spacing: 10) {
            // 默认交叉淡入效果（对比用）
            AsyncImage(url: imageURL, transaction: transaction) { phase in
                if let img = phase.image {
                    img.resizable()
                } else {
                    Color.red
                }
            }
            .aspectRatio(CGSize(width: 3600, height: 2085), contentMode: .fit)

            // 优化后的目标效果
            AsyncImage(url: imageURL, transaction: transaction) { phase in
                Group {
                    if let img = phase.image {
                        img.resizable()
                    } else {
                        Color.red
                    }
                }
                .transition(overlayFadeTransition)
            }
            .aspectRatio(CGSize(width: 3600, height: 2085), contentMode: .fit)
        }
        .frame(width: 500)
        .padding(10)
        .background(Color.yellow)
    }
}

PlaygroundPage.current.setLiveView(ContentView())

原理说明 #

• .asymmetric(insertion:removal:) 允许为视图的插入和移除阶段指定不同的转场动画
• 插入新视图时用.opacity，实现从透明到不透明的淡入效果
• 移除旧视图时用.identity，表示不应用任何动画，旧视图会保持完全不透明，直到转场结束后被系统自动移除，既不会产生半透明叠加的问题，也避免了ZStack永久保留视图的性能损耗

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