在 SwiftUI 中暂停和恢复动画非常简单，您可以通过确定中的动画类型来正确执行此操作withAnimation block.
您缺少的是另外两条信息：
- 动画暂停的值是多少？
- 恢复时动画应该继续到什么值？
这两部分至关重要，因为请记住，SwiftUI 视图只是表达您希望 UI 外观的方式，它们只是声明。除非您自己提供更新机制，否则它们不会保留 UI 的当前状态。因此 UI 的状态（如当前旋转角度）不会自动保存在其中。
虽然您可以引入计时器并以 X 毫秒的谨慎步骤自行计算角度值，但没有必要这样做。我建议让系统以合适的方式计算角度值。
您唯一需要的就是通知该值，以便您可以存储它并用于在暂停后设置直角并计算恢复的正确目标角度。有几种方法可以做到这一点，我真的鼓励您阅读 SwiftUI 动画的 3 部分介绍：https://swiftui-lab.com/swiftui-animations-part1/ https://swiftui-lab.com/swiftui-animations-part1/.
您可以采取的一种方法是使用GeometryEffect。它允许您指定变换，旋转是基本变换之一，因此它非常适合。它还遵循Animatable协议，这样我们就可以轻松参与到SwiftUI的动画系统中。
重要的部分是让视图知道当前的旋转状态是什么，以便它知道暂停时应该保持什么角度以及恢复时应该转到什么角度。这可以通过一个简单的绑定来完成，该绑定专门用于报告来自GeometryEffect到视图。
显示工作解决方案的示例代码：
import SwiftUI
struct PausableRotation: GeometryEffect {
// this binding is used to inform the view about the current, system-computed angle value
@Binding var currentAngle: CGFloat
private var currentAngleValue: CGFloat = 0.0
// this tells the system what property should it interpolate and update with the intermediate values it computed
var animatableData: CGFloat {
get { currentAngleValue }
set { currentAngleValue = newValue }
}
init(desiredAngle: CGFloat, currentAngle: Binding<CGFloat>) {
self.currentAngleValue = desiredAngle
self._currentAngle = currentAngle
}
// this is the transform that defines the rotation
func effectValue(size: CGSize) -> ProjectionTransform {
// this is the heart of the solution:
// reporting the current (system-computed) angle value back to the view
//
// thanks to that the view knows the pause position of the animation
// and where to start when the animation resumes
//
// notice that reporting MUST be done in the dispatch main async block to avoid modifying state during view update
// (because currentAngle is a view state and each change on it will cause the update pass in the SwiftUI)
DispatchQueue.main.async {
self.currentAngle = currentAngleValue
}
// here I compute the transform itself
let xOffset = size.width / 2
let yOffset = size.height / 2
let transform = CGAffineTransform(translationX: xOffset, y: yOffset)
.rotated(by: currentAngleValue)
.translatedBy(x: -xOffset, y: -yOffset)
return ProjectionTransform(transform)
}
}
struct DemoView: View {
@State private var isRotating: Bool = false
// this state keeps the final value of angle (aka value when animation finishes)
@State private var desiredAngle: CGFloat = 0.0
// this state keeps the current, intermediate value of angle (reported to the view by the GeometryEffect)
@State private var currentAngle: CGFloat = 0.0
var foreverAnimation: Animation {
Animation.linear(duration: 1.8)
.repeatForever(autoreverses: false)
}
var body: some View {
Button(action: {
self.isRotating.toggle()
// normalize the angle so that we're not in the tens or hundreds of radians
let startAngle = currentAngle.truncatingRemainder(dividingBy: CGFloat.pi * 2)
// if rotating, the final value should be one full circle furter
// if not rotating, the final value is just the current value
let angleDelta = isRotating ? CGFloat.pi * 2 : 0.0
withAnimation(isRotating ? foreverAnimation : .linear(duration: 0)) {
self.desiredAngle = startAngle + angleDelta
}
}, label: {
Text("????")
.font(.largeTitle)
.modifier(PausableRotation(desiredAngle: desiredAngle, currentAngle: $currentAngle))
})
}
}
