SwiftUI视图叠加层：出现淡出、消失淡入动画实现难题

需求说明 #

需要给叠加层实现特殊的透明度动画：

• 出现时：初始透明度为1，动画过渡至0
• 消失时：初始透明度为0，动画过渡至1

常规onDisappear无法触发消失阶段的动画，默认.transition(.opacity)的行为是出现时透明度从0到1、消失时从1到0，完全不符合需求。

解决方案：分阶段控制动画与视图显示 #

核心思路是先触发动画，再控制视图的显示状态，避免视图在动画完成前就被移除。以下是具体实现代码：

import SwiftUI

struct ReverseOpacityOverlay: View {
    // 控制叠加层是否处于视图层级中
    @State private var isOverlayActive = false
    // 单独控制叠加层的透明度
    @State private var overlayOpacity = 1.0
    // 动画时长，可按需调整
    private let animationDuration = 0.5
    
    var body: some View {
        ZStack {
            // 触发叠加层切换的按钮
            Button("切换叠加层") {
                toggleOverlay()
            }
            
            // 叠加层视图
            if isOverlayActive {
                Color.black.opacity(overlayOpacity)
                    .ignoresSafeArea()
            }
        }
    }
    
    private func toggleOverlay() {
        if isOverlayActive {
            // 执行消失动画：从0过渡到1
            withAnimation(.easeInOut(duration: animationDuration)) {
                overlayOpacity = 1.0
            }
            // 动画完成后隐藏叠加层，并重置透明度
            DispatchQueue.main.asyncAfter(deadline: .now() + animationDuration) {
                isOverlayActive = false
                overlayOpacity = 1.0
            }
        } else {
            // 先显示叠加层，再执行出现动画：从1过渡到0
            isOverlayActive = true
            withAnimation(.easeInOut(duration: animationDuration)) {
                overlayOpacity = 0.0
            }
        }
    }
}

struct ReverseOpacityOverlay_Previews: PreviewProvider {
    static var previews: some View {
        ReverseOpacityOverlay()
    }
}

代码逻辑解析 #

1. 状态变量分工：
   • isOverlayActive：负责控制叠加层是否存在于视图结构中
   • overlayOpacity：单独控制透明度，配合动画实现过渡效果
2. 出现动画流程：
   • 先将isOverlayActive设为true，让叠加层以初始透明度1显示
   • 通过withAnimation驱动overlayOpacity从1平滑过渡到0
3. 消失动画流程：
   • 先通过withAnimation驱动overlayOpacity从0过渡到1
   • 等待动画完成后，再将isOverlayActive设为false移除叠加层
   • 重置透明度为1，确保下一次出现动画的初始状态正确

替代方案：自定义过渡 #

如果不想手动管理延迟，也可以通过自定义Transition实现，但本质逻辑和上述方案一致：

struct CustomReverseOpacity: Transition {
    let isAppearing: Bool
    
    func body(content: Content) -> some View {
        content
            .opacity(isAppearing ? 1 : 0)
            .animation(.easeInOut, value: isAppearing)
    }
}

// 使用示例
if isOverlayActive {
    Color.black
        .transition(CustomReverseOpacity(isAppearing: isOverlayActive))
        .ignoresSafeArea()
        .onAppear {
            withAnimation {
                overlayOpacity = 0.0
            }
        }
        .onDisappear {
            withAnimation {
                overlayOpacity = 1.0
            }
        }
}

不过第一种方案逻辑更直观，也更便于调试和调整动画细节。

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