如何暂停与恢复SwiftUI中持续循环的动画？

你之前的尝试无效，是因为通过withAnimation启动的repeatForever动画会独立执行，不会因为后续设置withAnimation(nil)而停止。要实现动画的暂停和恢复，需要通过绑定动画修饰符结合状态控制，同时记录当前的旋转角度，确保恢复动画时从停止的位置继续。

修改后的代码如下：

import SwiftUI

struct AnimatedImage: View {
    @Binding var isAnimating: Bool
    @State private var rotation = 0.0
    
    var body: some View {
        Image(systemName: "arrow.up")
            .rotationEffect(.degrees(rotation))
            // 根据isAnimating状态应用或移除动画
            .animation(
                isAnimating ? .linear(duration: 1).repeatForever(autoreverses: false) : nil,
                value: rotation
            )
            .onAppear {
                // 初始加载时如果需要动画，启动旋转
                if isAnimating {
                    rotation = 360
                }
            }
            .onChange(of: isAnimating) { newValue in
                if newValue {
                    // 恢复动画时，从当前角度继续旋转
                    let currentAngle = rotation.truncatingRemainder(dividingBy: 360)
                    rotation = currentAngle + 360
                } else {
                    // 暂停动画时，保留当前的实际角度（取360的余数）
                    rotation = rotation.truncatingRemainder(dividingBy: 360)
                }
            }
    }
}

#Preview {
    @Previewable @State var isEnabled = false
    
    VStack {
        Button("rotating: \(isEnabled)") {
            isEnabled.toggle()
        }
        
        Spacer().frame(height: 20)
        
        AnimatedImage(isAnimating: $isEnabled)
    }
}

代码说明： #

• 使用.animation(_:value:)修饰符，根据isAnimating的状态动态切换动画：当为true时应用永久循环动画，为false时移除动画。
• 暂停动画时，通过truncatingRemainder(dividingBy: 360)保留当前的旋转角度（避免数值无限增大）。
• 恢复动画时，从当前角度开始继续增加360度，让动画无缝衔接之前的状态。

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