随着时间的推移，重复的 SwiftUI 动画变得不稳定

Question

我开发了一个重复的动画，它一开始很流畅，但在 10 或 20 秒后开始变得非常不稳定，在我的设备上什么都不做。这是视图的完整代码（设置为单视图应用的内容视图）：

import SwiftUI

struct MovingCirclesView: View {
    @State var animationPercent: Double = 0

    var body: some View {
        ZStack {
            MovingCircle(animationPercent: $animationPercent, size: 300, movementRadius: 100, startAngle: 0)
                .offset(x: -200, y: -200)

            MovingCircle(animationPercent: $animationPercent, size: 400, movementRadius: 120, startAngle: .pi * 3/4)
                .offset(x: 50, y: 300)

            MovingCircle(animationPercent: $animationPercent, size: 350, movementRadius: 200, startAngle: .pi * 5/4)
                .offset(x: 10, y: 30)

            MovingCircle(animationPercent: $animationPercent, size: 230, movementRadius: 80, startAngle: .pi * 1/2)
                .offset(x: 220, y: -300)

            MovingCircle(animationPercent: $animationPercent, size: 230, movementRadius: 150, startAngle: .pi)
                .offset(x: 220, y: 100)
        }.frame(maxWidth: .infinity, maxHeight: .infinity)
            .animation(Animation.linear(duration: 30).repeatForever(autoreverses: false))
            .onAppear() { self.animationPercent = 1 }
    }

    private struct MovingCircle: View, Animatable {
        @Binding var animationPercent: Double

        let size: CGFloat
        let movementRadius: CGFloat
        let startAngle: Double

        var body: some View {
            Circle()
                .frame(width: size, height: size)
                .foregroundColor(Color.white)
                .opacity(0.1)
                .offset(angle: .radians(.pi * 2 * self.animationPercent + self.startAngle), radius: self.movementRadius)
        }
    }
}

struct MovingCirclesView_Previews: PreviewProvider {
    static var previews: some View {
        MovingCirclesView()
            .background(Color.black)
            .edgesIgnoringSafeArea(.all)
    }
}

struct AngularOffset: AnimatableModifier {
    var angle: Angle
    var radius: CGFloat

    var animatableData: AnimatablePair<Double, CGFloat> {
        get {
            return AnimatablePair(angle.radians, radius)
        }
        set {
            self.angle = .radians(newValue.first)
            self.radius = newValue.second
        }
    }

    func body(content: Content) -> some View {
        return content.offset(CGSize(
            width: CGFloat(cos(self.angle.radians)) * self.radius,
            height: CGFloat(sin(self.angle.radians)) * self.radius
        ))
    }
}
extension View {
    func offset(angle: Angle, radius: CGFloat) -> some View {
        ModifiedContent(content: self, modifier: AngularOffset(angle: angle, radius: radius))
    }
}

总的想法是有一系列半透明的圆圈在圆圈中缓慢移动。我担心这不值得使用能源，并且无论如何都计划进行配置，但令我惊讶的是，动画似乎很快就陷入了困境。我在 iPhone X 上对其进行了分析，随着时间的推移，随着动画变得越来越不稳定，我没有看到 CPU 使用率和内存使用率有任何增加。

有没有人知道为什么动画会变得断断续续？我能做些什么来解决这个问题，还是我必须放弃这个想法？

Answer 1

这是一个解决方案 - 通过使用 .drawingGroup 并使用显式动画来激活 Metal。

在 Xcode 11.4 / iOS 13.4 上运行良好 - 在 5 分钟内测试，CPU 负载 4-5%

ZStack {

   // ..  circles here

}.frame(maxWidth: .infinity, maxHeight: .infinity)
.drawingGroup()
.onAppear() {
    withAnimation(Animation.linear(duration: 30).repeatForever(autoreverses: false)) {
        self.animationPercent = 1
    }
}

注意：发现 - 在这种情况下，隐式动画似乎一次又一次地重新创建更新堆栈，因此它们成倍增加，但显式动画仅激活一次。