实现与原生SwiftUI ScrollView一致惯性及拖拽效果的自定义滚动视图

核心问题解决思路 #

针对你遇到的三个问题，通过添加状态标记、替换动画曲线、补充手势处理逐一解决：

1. 修复动画中拖拽破坏惯性逻辑 #

添加isAnimatingInertia状态变量跟踪当前是否处于惯性动画阶段，拖拽开始时立即终止当前动画并重置状态，确保拖拽操作优先执行。

2. 实现原生级惯性减速效果 #

替换固定时长的线性动画为插值弹簧动画，它会自动根据距离和速度调整动画曲线，在接近目标位置时自然减速，完全匹配原生ScrollView的惯性表现。同时修正目标位置计算逻辑，使用round确保吸附到最近的item。

3. 修复惯性动画中的TapGesture问题 #

给轮播容器添加TapGesture，点击时立即停止惯性动画，并将视图直接吸附到最近的item位置，同时更新状态标记。

修改后的完整代码 #

struct InfiniteSnapCarousel<T: Equatable, Content: View>: View where T: Identifiable {
    @State private var items: [T]
    @State private var xOffset: CGFloat = .zero
    @State private var lastOffset: CGFloat = .zero
    // 新增：标记是否处于惯性动画阶段
    @State private var isAnimatingInertia = false
    @ViewBuilder private var content: (T) -> Content
    private let spacing: CGFloat
    private let itemWidth: CGFloat
    private let itemHeight: CGFloat
    
    init(
        items: [T],
        spacing: CGFloat = 16,
        itemWidth: CGFloat,
        itemHeight: CGFloat,
        @ViewBuilder content: @escaping (T) -> Content
    ) {
        self._items = State(initialValue: items)
        self.spacing = spacing
        self.itemWidth = itemWidth
        self.itemHeight = itemHeight
        self.content = content
    }
    
    var body: some View {
        GeometryReader{ geo in
            LazyHStack(spacing: spacing){
                ForEach(items){ item in
                    content(item)
                        .frame(width: itemWidth, height: itemHeight)
                        .offset(x: xOffset)
                        .gesture(
                            DragGesture()
                                .onChanged({ value in
                                    // 拖拽开始时终止当前惯性动画
                                    if isAnimatingInertia {
                                        withAnimation(.none) {
                                            lastOffset = xOffset
                                            isAnimatingInertia = false
                                        }
                                    }
                                    loopCarousel(after: item)
                                    // 拖拽过程不需要动画，实时更新偏移
                                    self.onDragChanged(value)
                                })
                                .onEnded({ value in
                                    lastOffset = xOffset
                                    // 使用插值弹簧动画实现自然惯性减速
                                    withAnimation(.interpolatingSpring(stiffness: 300, damping: 30)) {
                                        let contentCenterX = value.predictedEndLocation.x + geo.size.width / 2
                                        let imaginaryItemWidth = itemWidth + spacing
                                        // 用round确保吸附到最近的item
                                        let index = Int(round(contentCenterX / imaginaryItemWidth))
                                        // 修正偏移计算，和初始位置逻辑一致
                                        xOffset = CGFloat(index) * imaginaryItemWidth + (geo.size.width / 2 - itemWidth / 2)
                                        lastOffset = xOffset
                                        isAnimatingInertia = true
                                    }
                                })
                        )
                }
            }
            // 添加TapGesture处理惯性动画中的点击
            .gesture(
                TapGesture()
                    .onEnded {
                        guard isAnimatingInertia else { return }
                        withAnimation(.interpolatingSpring(stiffness: 500, damping: 40)) {
                            let imaginaryItemWidth = itemWidth + spacing
                            let currentIndex = round(xOffset / imaginaryItemWidth)
                            xOffset = currentIndex * imaginaryItemWidth + (geo.size.width / 2 - itemWidth / 2)
                            lastOffset = xOffset
                            isAnimatingInertia = false
                        }
                    }
            )
            .onAppear {
                xOffset = geo.size.width / 2 - itemWidth / 2
            }
        }
    }
    
    private func onDragChanged(_ value: DragGesture.Value) {
        self.xOffset = lastOffset + value.translation.width
    }
    
    // 你的循环逻辑实现（保留原有代码）
    private func loopCarousel(after item: T) {
        // ... 原有循环逻辑
    }
}

关键修改说明 #

• 状态标记isAnimatingInertia：用于区分拖拽和惯性动画状态，避免两者冲突。
• 插值弹簧动画：interpolatingSpring(stiffness: 300, damping: 30)参数可根据需求调整，stiffness越大动画越"硬"，damping越大减速越快。
• TapGesture处理：仅在惯性动画时响应点击，直接吸附到最近item，提升交互体验。
• 偏移计算修正：统一初始位置和目标位置的计算逻辑，避免偏移错位。

内容的提问来源于stack exchange，提问作者Igor Ševtšenko