SwiftUI图片轮播（View Pager）动画异常问题求助

我太懂这种糟心的情况了！做了轮播效果，结果首尾切换动画快得像闪电，中间却很流畅，完全破坏了体验对吧？你遇到的这个问题，本质上是索引切换时的偏移量变化幅度不一致导致的——比如从最后一张（索引n-1）切到第一张（索引0），偏移量一下子要跳n-1个屏幕宽度，而中间切换只跳1个宽度，相同动画时间下，自然速度快很多；至于0到1的过渡快，大概率是初始索引切换或者自动轮播的逻辑没处理好，导致动画没有正确计算。

给你一套亲测有效的解决方案，分步骤来：

1. 给数据源加“虚拟元素”，制造无限滚动假象 #

我们不需要真的让索引跳来跳去，而是在原数组的首尾各加一个重复元素，比如原数组是[图0, 图1, 图2]，变成[图2, 图0, 图1, 图2, 图0]。这样从原最后一张（图2）切到第一张（图0）时，其实是切到数组里的最后一个虚拟元素（图0），视觉上无缝，然后再偷偷把索引重置到真实的图0位置；反过来同理。

在你的代码里可以这么处理：

// 假设你的services是图片数据数组，先定义一个无限滚动用的数组
private var infiniteBannerImages: [YourImageModelType] {
    guard let firstImage = services.first, let lastImage = services.last else {
        return services
    }
    // 首尾各加一个重复元素
    return [lastImage] + services + [firstImage]
}

2. 调整索引逻辑，无缝重置 #

把初始索引设为1（对应原数组的第一张图），然后监听索引变化，当滚动到虚拟元素时，不带动画地重置索引：

struct HorizontalPagerView: View {
    let services: [YourImageModelType] // 你的原图片数据源
    @State private var currentIndex = 1 // 初始指向真实的第一张图
    private let screenWidth = UIScreen.main.bounds.width
    
    private var infiniteBannerImages: [YourImageModelType] {
        guard let first = services.first, let last = services.last else { return services }
        return [last] + services + [first]
    }
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 0) {
                ForEach(infiniteBannerImages.indices, id: \.self) { index in
                    // 用Kingfisher加载图片，保持你的原有布局
                    KFImage(URL(string: infiniteBannerImages[index].imageUrl))
                        .resizable()
                        .scaledToFill()
                        .frame(width: screenWidth, height: 200) // 换成你的实际高度
                        .clipped()
                }
            }
            .offset(x: -CGFloat(currentIndex) * screenWidth)
            .animation(.easeInOut(duration: 0.3), value: currentIndex) // 统一动画时间
        }
        .onChange(of: currentIndex) { newIndex in
            // 滚动到最后一个虚拟元素（原第一张图），重置到真实的第一张图索引
            if newIndex == infiniteBannerImages.count - 1 {
                withAnimation(.none) {
                    currentIndex = 1
                }
            }
            // 滚动到第一个虚拟元素（原最后一张图），重置到真实的最后一张图索引
            else if newIndex == 0 {
                withAnimation(.none) {
                    currentIndex = infiniteBannerImages.count - 2
                }
            }
        }
    }
}

3. 自动轮播的话，调整索引递增逻辑 #

如果是自动轮播，直接让currentIndex每次+1就行，因为我们已经处理了无缝重置：

// 在body的ScrollView外面加上自动轮播定时器
.onAppear {
    Timer.scheduledTimer(withTimeInterval: 3, repeats: true) { timer in
        withAnimation {
            currentIndex += 1
        }
    }
}

这样处理后，不管是首尾切换还是中间切换，偏移量的变化幅度都是一个屏幕宽度，动画速度就完全一致了，视觉上就是完美的无限轮播~

备注：内容来源于stack exchange，提问作者Robin kumar