Swift动画问题：如何实现不同scaleEffect的脉动动画切换及自动恢复

问题根源 #

你当前的代码有两个核心问题：

1. 在onChange里连续调用两个withAnimation，第二个动画会立即覆盖第一个，导致3次循环的放大动画根本来不及完成就被打断，直接进入永久小幅度动画，但此时状态没有正确回退。
2. 你的脉动动画没加autoreverses=true，默认的repeatForever只会从初始值跳到目标值后停住，不是真正的“脉动”（缩放后恢复原尺寸再重复）。

修复方案 #

利用动画的completion回调，等3次放大动画完全结束后，再启动永久的小幅度脉动；同时给动画加上autoreverses=true实现真正的往复脉动效果。

完整代码示例 #

struct PulsingCircleView: View {
    @State private var scale: CGFloat = 0
    @State private var eventDetected: Bool = false // 你的事件检测标记

    private let smallPulseScale: CGFloat = 0.1
    private let largePulseScale: CGFloat = 0.8

    var body: some View {
        Circle()
            .frame(width: 100, height: 100)
            .scaleEffect(1 + scale)
            .foregroundColor(eventDetected ? .red : .blue)
            .onAppear {
                startSmallPulse()
            }
            .onChange(of: eventDetected) { newValue in
                guard newValue else { return } // 仅在事件触发时执行放大逻辑
                // 先重置缩放状态，确保动画起始干净
                withAnimation(.easeInOut) {
                    scale = 0
                } completion: {
                    // 启动3次放大脉动动画
                    withAnimation(.easeInOut.repeatCount(3, autoreverses: true)) {
                        scale = largePulseScale
                    } completion: {
                        // 放大动画完成后，恢复小幅度永久脉动
                        startSmallPulse()
                        // 重置事件标记，避免重复触发
                        eventDetected = false
                    }
                }
            }
    }

    private func startSmallPulse() {
        withAnimation(.easeInOut.repeatForever(autoreverses: true)) {
            scale = smallPulseScale
        }
    }
}

关键细节解释 #

• autoreverses: true：让动画在到达目标缩放值后自动反向回到初始状态，形成“缩放→恢复→缩放”的往复脉动效果，而非一次性跳转到目标后停住。
• 动画 completion 回调：严格保证放大动画完成3次完整循环后，再启动小幅度脉动，彻底避免动画冲突覆盖的问题。
• 状态前置重置：切换动画前先把scale重置为0，确保每次动画的起始状态一致，不会出现残留的缩放偏移。

这样修改后，事件触发时圆形会完成3次大幅度脉动，之后自动恢复到默认的小幅度永久脉动，不会停留在大尺寸状态。

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