SwiftUI 如何重置路径描边动画：双击切换形状数组时让新形状从0%播放动画

问题根因 #

你遇到的两个异常，本质都是触碰了SwiftUI的两个核心运行机制：

• 视图复用逻辑：直接切换pathArr[index]的内容时，SwiftUI会默认这是同一个视图实例的内容更新，不会销毁重建视图，也就不会触发你写在onAppear里的动画启动逻辑——首次显示后，后续所有视图更新都不会跑这段动画代码，自然后续形状不会有动画效果。
• 动画事务合并逻辑：在双击的回调里同步修改index和percentage两个状态时，SwiftUI会自动把这两个状态的变更打包到同一个动画事务中，原本用来瞬间归零的percentage = .zero操作会被插值动画覆盖，变成平滑的动画过渡，根本没法快速重置进度，表现为双击后路径直接消失、不渲染不播放。

修复实现 #

只需要三个关键调整，就能完全解决你遇到的两个问题：

• 给形状渲染视图绑定和索引关联的唯一标识，强制SwiftUI在索引变化时销毁旧视图、创建新视图，确保onAppear能正常触发。
• 重置动画进度时关闭动画上下文，确保进度归零是瞬间完成，没有过渡动画拖慢。
• 等进度完全重置、索引切换完成后，再为新的形状启动循环播放动画。

修复后的完整代码如下：

struct TestView: View {
    @State var percentage: CGFloat = .zero
    @State var index: Int = 0
    @State var pathArr = Array<Path>(repeating: Rectangle().path(in: CGRect(x: 0, y: 0, width: 100, height: 100)), count: 5)

    var body: some View {
        pathArr[index]
            .trim(from: 0, to: percentage)
            .stroke(style: StrokeStyle(lineWidth: 10, lineCap: .round))
            // 关键：绑定唯一标识，索引变化时强制重建视图，触发onAppear
            .id(index)
            .onAppear {
                percentage = 0
                withAnimation(Animation.easeInOut(duration: 2.0).repeatForever(autoreverses: false)) {
                    percentage = 1.0
                }
            }
            .onTapGesture(count: 2) {
                // 关键：重置进度时关闭动画，实现瞬间归零
                withAnimation(nil) {
                    percentage = .zero
                }
                // 切换索引，触发视图重建流程
                index += 1
            }
    }
}

实用提示：如果需要循环轮播所有形状，只需要在更新索引时加上数组长度取模即可：index = (index + 1) % pathArr.count，避免数组越界。

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