SwiftUI实现可重置弹跳式Chevron动画以引导关注创建按钮

问题分析 #

你当前的代码通过状态变量chevronAnimationRunning触发弹簧动画，但由于动画设置为repeatForever，状态切换时只会反向执行动画，无法从初始偏移值（y=0）重新启动。核心原因是状态变量的切换只是触发动画状态反转，而非重置动画的起始位置。

解决方案 #

直接通过控制偏移量的状态变量，配合显式的withAnimation来启动循环动画，并在视图消失或需要重置时恢复初始状态，确保动画能从头开始运行。

修改后的代码

struct WelcomeView: View {
    @State private var chevronOffset: CGFloat = 0

    var body: some View {
        Image(systemName: "chevron.down")
            .resizable()
            .scaledToFit()
            .frame(width: 60, height: 60)
            .foregroundColor(.accentColor)
            .offset(y: chevronOffset)
            .onAppear {
                startChevronAnimation()
            }
            .onDisappear {
                // 重置偏移量，保证下次视图出现时动画从初始位置启动
                chevronOffset = 0
            }
    }

    private func startChevronAnimation() {
        withAnimation(
            Animation.interpolatingSpring(stiffness: 350, damping: 15, initialVelocity: 20)
                .repeatForever(autoreverses: true)
        ) {
            chevronOffset = 20
        }
    }

    // 可选：手动重置动画的方法（比如用户交互后触发）
    private func resetChevronAnimation() {
        chevronOffset = 0
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.01) {
            startChevronAnimation()
        }
    }
}

代码说明

1. 用chevronOffset直接控制图标的y轴偏移量，初始值为0（初始位置）。
2. onAppear中调用startChevronAnimation，通过withAnimation将偏移量设置为20，结合repeatForever(autoreverses: true)实现持续的跳跃效果。
3. onDisappear中重置chevronOffset为0，确保视图再次出现时，动画能从初始位置重新开始。
4. 可选的resetChevronAnimation方法用于手动触发重置，比如用户点击按钮后调用，先立即恢复初始位置，再延迟启动动画保证状态更新生效。

内容的提问来源于stack exchange，提问作者Adrian Föder