SwiftUI中如何动态确定视图切换时的过渡动画方向？

核心思路是记录上一次选中的板块，通过对比新旧板块的索引来动态决定过渡方向，这样就能实现像原生Tab切换那样的定向动画。

实现步骤： #

1. 新增状态变量保存上一次选中的板块，用于对比方向
2. 监听选中板块的变化，计算切换方向（新板块索引 > 旧索引 → 向右切换；反之向左）
3. 根据方向动态生成不对称过渡动画
4. 确保动画逻辑和视图更新同步

修改后的完整代码： #

enum Section: String, CaseIterable {
    case one, two, three, four
}

struct Demo: View {
    @State private var selectedSection: Section = .one
    @State private var lastSelectedSection: Section = .one
    
    var body: some View {
        // 根据切换方向动态生成过渡
        let transition: AnyTransition = {
            let oldIndex = Section.allCases.firstIndex(of: lastSelectedSection)!
            let newIndex = Section.allCases.firstIndex(of: selectedSection)!
            
            if newIndex > oldIndex {
                // 向右切换：新视图从右侧进入，旧视图向左侧退出
                return .asymmetric(
                    insertion: .move(edge: .trailing),
                    removal: .move(edge: .leading)
                )
            } else {
                // 向左切换：新视图从左侧进入，旧视图向右侧退出
                return .asymmetric(
                    insertion: .move(edge: .leading),
                    removal: .move(edge: .trailing)
                )
            }
        }()
        
        Group {
            switch selectedSection {
            case .one: ViewOne()
            case .two: ViewTwo()
            case .three: ViewThree()
            case .four: ViewFour()
            }
        }
        .transition(transition)
        .animation(.easeInOut(duration: 0.3), value: selectedSection)
        // 监听选中状态变化，更新上一次选中的板块
        .onChange(of: selectedSection) { newValue in
            lastSelectedSection = selectedSection
        }
    }
}

// 示例子视图
struct ViewOne: View {
    var body: some View {
        Color.red.overlay(Text("View One"))
    }
}

struct ViewTwo: View {
    var body: some View {
        Color.blue.overlay(Text("View Two"))
    }
}

struct ViewThree: View {
    var body: some View {
        Color.green.overlay(Text("View Three"))
    }
}

struct ViewFour: View {
    var body: some View {
        Color.yellow.overlay(Text("View Four"))
    }
}

关键细节说明： #

• 索引对比：利用Section.allCases的顺序获取新旧板块的索引，判断切换方向
• 动态过渡：每次选中状态变化时，都会重新计算对应方向的不对称过渡
• 状态同步：通过onChange在选中状态变更后更新lastSelectedSection，保证下一次切换时的方向判断准确
• 动画绑定：将动画绑定到selectedSection，确保只有选中状态变化时才触发过渡

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