SwiftUI多元素滑块动画：仅当前索引项展示时触发4秒填充动画咨询

问题根因 #

• 全局共享minWidth绑定：所有滑块共用同一个宽度变量，无法独立控制每个滑块的动画起始值，索引切换后新激活的滑块会直接继承之前的最大值，没有从0开始的动画过程。
• 视图显隐控制逻辑错误：通过if shouldAnimate控制白色填充层的插入/移除，当索引匹配时视图才被加入视图树，此时宽度初始值已经是最大值，动画无法触发。
• 动画触发值不匹配：动画绑定的观测值是minWidth，但索引切换才是动画的实际触发条件，两者逻辑没有对齐导致动画时机错误。

修复代码 #

1. 滑块组件优化 #

struct SliderElement: View {
    @Binding var currentRunningIndex: Int
    var elementPosition: Int
    // 滑块总宽度可根据需求调整，也可改为外部传入参数
    private let maxWidth: CGFloat = 75
    
    private var fillWidth: CGFloat {
        // 当前索引匹配时宽度为最大值，否则为0
        currentRunningIndex == elementPosition ? maxWidth : 0
    }
    
    var body: some View {
        ZStack(alignment: .leading) {
            // 灰色背景滑块
            Capsule()
                .foregroundColor(Color.gray.opacity(0.6))
                .frame(width: maxWidth, height: 4)
            
            // 白色填充层，始终保留在视图树中，不通过if控制显隐
            Capsule()
                .foregroundColor(Color.white)
                .frame(width: fillWidth, height: 4)
                // 绑定索引为动画触发值，仅索引变化时触发动画
                .animation(.easeInOut(duration: 4), value: currentRunningIndex)
        }
    }
}

如果需要已经播放完成的滑块保持全满状态，修改fillWidth逻辑即可：

private var fillWidth: CGFloat {
    if elementPosition < currentRunningIndex {
        return maxWidth // 已播放的滑块保持全满
    } else if elementPosition == currentRunningIndex {
        return maxWidth // 当前播放的滑块触发填充动画
    } else {
        return 0 // 未播放的滑块保持空白
    }
}

2. 父层调用简化 #

父层不需要再维护minWidth相关变量和逻辑，仅需维护当前激活索引、通过定时器每4秒切换索引即可：

HStack {
    ForEach(0..<collection.count, id: \.self) { index in
        SliderElement(currentRunningIndex: $currentIndex, elementPosition: index)
    }
}

// 定时器触发的切换方法，直接修改索引即可自动触发对应滑块动画
func switchToNextItem() {
    // 索引循环切换，可根据需求调整为轮播或者到最后停止
    currentIndex = (currentIndex + 1) % collection.count
}

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