SwiftUI中如何实现图标顺逆时针旋转摆动并控制次数？

原代码存在的问题 #

1. 变量名错误：rotationEffect中使用了未定义的reminderSet，应改为alarmSet
2. 弹簧动画interpolatingSpring会自动振荡多次，无法精确控制摆动次数
3. 仅设置了0→10度的单向旋转，未实现左右双向摆动

解决方案：使用关键帧动画精确控制 #

通过**关键帧动画（Keyframe Animation）**定义完整的摆动路径，实现左右双向摆动，并严格控制摆动次数，动画结束后自动重置按钮状态。

完整代码（兼容iOS 15+）

struct ContentView: View {
    @State private var alarmSet = false
    @State private var currentAngle: Double = 0
    
    var body: some View {
        ZStack {
            Color.black
            VStack {
                Image(systemName: "bell.fill")
                    .font(.system(size: 250))
                    .foregroundColor(.white)
                    .rotationEffect(.degrees(currentAngle), anchor: .top)
                
                Button(action: {
                    guard !alarmSet else { return }
                    alarmSet = true
                    
                    // 定义三次摆动轨迹：0→10°（右）→-10°（左）→10°（右）→0°
                    withAnimation(Animation.keyframe(duration: 0.6)) {
                        KeyframeTrack(\.currentAngle) {
                            Keyframe(0, duration: 0)
                            Keyframe(10, duration: 0.15)
                            Keyframe(-10, duration: 0.15)
                            Keyframe(10, duration: 0.15)
                            Keyframe(0, duration: 0.15)
                        }
                    }
                    
                    // 动画结束后重置按钮状态
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.6) {
                        alarmSet = false
                    }
                }, label: {
                    Text(alarmSet ? "Alarm Set" : "Wake Me")
                        .font(.largeTitle)
                        .foregroundStyle(.white)
                })
                .padding(.top, 20)
            }
        }
        .ignoresSafeArea()
    }
}

代码关键点说明 #

• 用currentAngle绑定旋转角度，通过关键帧精确控制摆动路径
• 关键帧定义的轨迹对应三次摆动动作：向右摆→向左摆→向右摆，最后回到初始位置
• 总时长0.6s，每个摆动阶段0.15s，保证节奏均匀
• 通过DispatchQueue延迟重置alarmSet，动画结束后按钮自动回到初始状态
• 如果需要更多摆动次数，只需在关键帧中添加对应的角度节点即可（例如三次来回摆动可增加-10°、10°、-10°、0°节点，总时长调整为0.9s）

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