滚动视图中的 SwiftUI 动画错误

如何解决滚动视图中的 SwiftUI 动画错误

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

我的代码是

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)，但我无法使其正常工作。

顺便说一句，我使用加载视图修饰符将我的活动指示器连接到滚动视图，它看起来像这样

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)
            }
    }
}

感谢任何想法和建议我真的被困住了。谢谢

解决方法

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

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 !!

,

如果您对之前的回答有任何问题，请尝试删除 .animation 并将其替换为 withAnimation：

https://developer.apple.com/documentation/swiftui/withanimation(_:_:)

这样做的好处是不影响其他动画。