每次出现视图时，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
            }
    }
}

每次出现视图时，SwiftUI .onAppear withAnimation 都会加速。为什么？

SwiftUI .onAppear withAnimation speeds up each time the view appears. Why?

animation

swift

swiftui

viewmodifier

swiftui-animation