ScrollView 中的 SwiftUI 动画错误

Question

我对 SwiftUI 比较陌生，我正在尝试为我的应用程序实现动画加载器。它工作正常，直到我在 ScrollView 中向下滚动我的内容，然后向后移动以触发下拉刷新。圆圈开始跳跃，尽管它们应该一一增加和减小它们的大小。
我的代码是

struct ActivityIndicator: View {

    var isShowing: Bool
    @State private var shouldAnimate = false

    init(isShowing: Bool) {
        self.isShowing = isShowing
    }

    var body: some View {
        HStack(alignment: .center) {
            Circle()
                .fill(Color.mainAccent)
                .frame(width: 20, height: 20)
                .scaleEffect(shouldAnimate ? 1.0 : 0.5)
                .animation(Animation.easeInOut(duration: 0.5).repeatForever())
            Circle()
                .fill(Color.mainAccent)
                .frame(width: 20, height: 20)
                .scaleEffect(shouldAnimate ? 1.0 : 0.5)
                .animation(Animation.easeInOut(duration: 0.5).repeatForever().delay(0.3))
            Circle()
                .fill(Color.mainAccent)
                .frame(width: 20, height: 20)
                .scaleEffect(shouldAnimate ? 1.0 : 0.5)
                .animation(Animation.easeInOut(duration: 0.5).repeatForever().delay(0.6))
        }
            .opacity(self.isShowing ? 1 : 0)
            .onAppear {
                self.shouldAnimate = true
            }
    }
}

我读过几篇与我的案例相关的文章，似乎我可能不得不使用 withAnimation (Explicit) 代替 .animation (Implicit) 但我无法使其正常工作。
顺便说一句，我使用加载 View 修饰符将我的事件指示器连接到 ScrollView ，它看起来像这样

struct LoadingView: ViewModifier {
    @Binding var isShowing: Bool

    func body(content: Content) -> some View {
            ZStack(alignment: .center) {
                content
                    .disabled(self.isShowing)
                    .blur(radius: self.isShowing ? 3 : 0)

                ActivityIndicator(isShowing: isShowing)
            }
    }
}

任何想法和建议表示赞赏我真的被困住了。谢谢

Answer 1

尝试将所有动画链接到相关状态，例如

var body: some View {
    HStack(alignment: .center) {
        Circle()
            .fill(Color.mainAccent)
            .frame(width: 20, height: 20)
            .scaleEffect(shouldAnimate ? 1.0 : 0.5)
            .animation(Animation.easeInOut(duration: 0.5).repeatForever(), 
                       value: shouldAnimate)   // << here !!