SwiftUI . onappear withAnimation在每次视图出现时加速.为什么?

Question

我的应用程序中有正在进行的动画，在onAppear上触发并使用withAnimation配置，更新@State属性。

每次视图出现时，动画的运行速度都比以前快一点，所以如果视图被显示，然后被模态显示覆盖或隐藏在导航中，然后重新出现，动画开始非常非常快-可能比它应该快10或20倍。

代码如下:

struct HueRotationAnimation: ViewModifier {
@State var hueRotationValue: Double
func body(content: Content) -> some View {
content
.hueRotation(Angle(degrees: hueRotationValue))
.onAppear() {
DispatchQueue.main.async {
withAnimation(.linear(duration: 20).repeatForever(autoreverses: false)) {
hueRotationValue += 360
}
}
}
}
}
struct GradientCircle: View {
var gradient: Gradient
@State var hueRotationValue: Double = Double.random(in: 0..<360)

var body: some View {
GeometryReader { geometry in
Circle()
.fill(
radialGradient(geometry: geometry, gradient: gradient)
)
.modifier(HueRotationAnimation(hueRotationValue: hueRotationValue))
}
}
}
func radialGradient(geometry: GeometryProxy, gradient: Gradient) -> RadialGradient {
RadialGradient(gradient: gradient,
center: .init(x: 0.82, y: 0.85),
startRadius: 0.0,
endRadius: max(geometry.size.width, geometry.size.height) * 0.8)
}

你知道是什么导致每次视图重新出现时速度加快吗?有什么建议可以解决这个问题吗?

(注意:这是运行Xcode 13.0 beta 4)

Answer 1

我认为这与你的+= 360有关，因为每次它出现时，它需要旋转的度数又增加了360度。而不是在显示中添加360度，尝试设置一个状态布尔值来决定动画应该何时运行。试试下面的代码，看看它是否适合你。

struct HueRotationAnimation: ViewModifier {
@State var hueRotationValue: Double
@State private var animated = false
func body(content: Content) -> some View {
content
.hueRotation(Angle(degrees: animated ? hueRotationValue : hueRotationValue + 360)).animation(.linear(duration: 20).repeatForever(autoreverses: false))
.onAppear() {
self.animated.toggle()
}
}
}

这样360度的动画应该保持360度，动画的速度不应该改变。

Answer 2

为了推进@yawnobleix的答案，我添加了一个。ondisappear按钮。它解决了视图出现时的一些其他错误>消失在出现了。

struct HueRotationAnimation: ViewModifier {
@State var hueRotationValue: Double
@State private var animated = false
func body(content: Content) -> some View {
content
.hueRotation(Angle(degrees: animated ? hueRotationValue : hueRotationValue + 360)).animation(.linear(duration: 20).repeatForever(autoreverses: false))
.onAppear {
animated = true
}
.onDisappear {
animated = false
}
}
}