SwiftUI中如何为PageTabViewStyle的TabView添加自定义动画过渡

SwiftUI中使用.page样式的TabView时，其页面切换动画是系统内部封装实现的，无法通过.animation修饰符或withAnimation块直接修改动画曲线、时长等参数，这就是你遇到自定义动画不生效的原因。

要实现自定义的页面切换动画，你可以放弃原生的PageTabViewStyle，改用ZStack+HStack结合偏移量的方式手动模拟页面切换效果，具体实现如下：

基础实现（带自定义动画） #

struct CustomPageView: View {
    @State private var currentPage = 0
    private let pageCount = 4
    // 自定义动画：可随意修改曲线、时长
    private let customAnimation = Animation.easeOut(duration: 0.5)
    
    var body: some View {
        ZStack {
            // 横向排列所有页面，每个页面占满屏幕宽度
            HStack(spacing: 0) {
                Color.red.frame(maxWidth: .infinity)
                Color.yellow.frame(maxWidth: .infinity)
                Color.purple.frame(maxWidth: .infinity)
                Color.cyan.frame(maxWidth: .infinity)
            }
            .frame(width: UIScreen.main.bounds.width)
            // 通过偏移量控制页面位置，触发自定义动画
            .offset(x: -CGFloat(currentPage) * UIScreen.main.bounds.width)
            .animation(customAnimation, value: currentPage)
            
            // 页面切换按钮
            Button(action: {
                currentPage = (currentPage + 1) % pageCount
            }) {
                Text("Change Page")
            }
            .buttonStyle(.borderedProminent)
        }
    }
}

补充：支持滑动切换 #

如果需要模拟原生PageView的滑动切换功能，可以添加拖拽手势：

// 在HStack的修饰符后添加手势
.gesture(
    DragGesture()
        .onEnded { gesture in
            let screenWidth = UIScreen.main.bounds.width
            // 设置滑动阈值，超过阈值才触发页面切换
            let swipeThreshold = screenWidth * 0.3
            
            if gesture.translation.width < -swipeThreshold {
                // 向左滑动，切换到下一页
                currentPage = min(currentPage + 1, pageCount - 1)
            } else if gesture.translation.width > swipeThreshold {
                // 向右滑动，切换到上一页
                currentPage = max(currentPage - 1, 0)
            }
        }
)

这种方式完全由你控制动画的各个参数，无论是easeOut、spring还是自定义时长，都能完美生效。

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