SwiftUI如何为offset与opacity组合transition添加延迟效果

错误原因 #

你之前的写法失效是因为SwiftUI对于直接附加在组合转场整体上的动画修饰符，调度优先级存在差异，会导致offset属性的动画被opacity动画隐式覆盖，最终仅透明度效果生效。

正确实现方案 #

提供两种稳定可用的写法：

写法1：延迟加在触发动画的调度块中（最推荐，兼容性最好） #

这种方式将动画配置和转场定义拆分，避免转场内部的动画冲突：
首先定义组合转场：

extension AnyTransition {
    // 淡入+向下位移组合转场（初始位置为上方20pt，动画到原位置）
    static let fadeInDown: AnyTransition = .offset(y: -20)
        .combined(with: .opacity)
}

在视图显隐的触发逻辑中添加带延迟的动画：

struct DemoView: View {
    @State private var showContent = false
    
    var body: some View {
        VStack {
            Button("触发转场") {
                // 动画延迟直接加在此处
                withAnimation(.easeOut.delay(0.3)) {
                    showContent.toggle()
                }
            }
            
            if showContent {
                Text("目标视图")
                    .transition(.fadeInDown)
            }
        }
    }
}

写法2：动画直接绑定在转场定义中（适合需要转场独立配置的场景） #

如果需要转场自带延迟，不和触发逻辑耦合，需要通过asymmetric指定插入阶段的动画，避免全局动画冲突：

extension AnyTransition {
    static let delayedFadeInDown: AnyTransition = .asymmetric(
        insertion: .offset(y: -20)
            .combined(with: .opacity)
            .animation(.easeOut.delay(0.3)),
        removal: .opacity // 可自定义移除阶段的转场效果
    )
}

// 使用时直接附加转场即可，触发逻辑不需要额外加动画配置
struct DemoView: View {
    @State private var showContent = false
    
    var body: some View {
        VStack {
            Button("触发转场") {
                showContent.toggle()
            }
            
            if showContent {
                Text("目标视图")
                    .transition(.delayedFadeInDown)
            }
        }
        // 需给父容器添加基础动画修饰符，保证转场动画生效
        .animation(.easeOut, value: showContent)
    }
}

补充说明 #

如果你需要的是视图从上方往下移动（向下位移），初始offset的y值设为负是正确的；如果需要从下往上移动，把y值改为正即可。

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