SwiftUI中模型变更时如何实现视图的左右滑动切换动画？

问题根因 #

1. 原代码用ForEach+条件判断，每次仅渲染当前匹配的ChooseTrainingView，旧视图直接从视图树中移除，无法触发消失动画。
2. 直接绑定currentWord不使用ForEach时，SwiftUI会复用现有视图实例更新内容，而非创建新视图，因此无法触发切换动画。

实现方案：ZStack叠加视图+自定义过渡动画 #

通过ZStack同时保留前后视图，配合自定义过渡方向，实现旧视图左滑出、新视图右滑入的效果：

1. 定义自定义过渡动画 #

创建两个方向的过渡，分别对应左滑消失和右滑出现：

extension AnyTransition {
    static var slideLeftOut: AnyTransition {
        .asymmetric(
            insertion: .identity,
            removal: .move(edge: .leading).combined(with: .opacity)
        )
    }
    
    static var slideRightIn: AnyTransition {
        .asymmetric(
            insertion: .move(edge: .trailing).combined(with: .opacity),
            removal: .identity
        )
    }
}

2. 重构视图结构 #

用ZStack叠加新旧视图，通过currentWord控制视图的显隐和过渡：

ZStack {
    // 旧视图：currentWord变更时触发左滑消失动画
    if let previousWord = training.previousWord {
        ChooseTrainingView(word: previousWord) { success in
            withAnimation(.easeInOut(duration: 0.5)) {
                _ = training.goToNext(success: success)
            }
        }
        .transition(.slideLeftOut)
    }
    
    // 当前视图：新视图从右侧滑入
    ChooseTrainingView(word: training.currentWord) { success in
        withAnimation(.easeInOut(duration: 0.5)) {
            _ = training.goToNext(success: success)
        }
    }
    .transition(.slideRightIn)
}

3. 完善Training模型 #

添加previousWord属性记录上一个单词，确保旧视图能被保留用于动画：

class Training: ObservableObject {
    @Published var words: [Word]
    @Published var currentWord: Word
    @Published var previousWord: Word?
    
    func goToNext(success: Bool) -> Bool {
        // 先记录当前单词为上一个单词
        previousWord = currentWord
        
        // 实现下一个单词的跳转逻辑（示例）
        guard let currentIndex = words.firstIndex(of: currentWord) else {
            return false
        }
        let nextIndex = currentIndex + 1
        guard nextIndex < words.count else {
            // 无更多单词的处理逻辑
            return false
        }
        currentWord = words[nextIndex]
        return true
    }
}

关键说明 #

• ZStack让新旧视图同时存在于视图树中，动画过程中不会被直接移除，因此能完整触发消失和出现动画。
• 自定义的asymmetric过渡可以分别控制插入和移除时的动画方向，精准实现左滑出右滑入的效果。
• 必须用withAnimation包裹goToNext的调用，确保状态变更时触发动画。

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