滚动视图中的 SwiftUI 动画错误答案

【问题标题】：SwiftUI Animation Bug inside Scroll View滚动视图中的 SwiftUI 动画错误
【发布时间】：2021-08-04 10:02:05
【问题描述】：

我对 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（显式）而不是 .animation（隐式），但我无法使其正常工作。

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

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

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

【问题讨论】：

标签： swift swiftui ios-animations

【解决方案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 !!

【讨论】：

【解决方案2】：

如果您对上一个答案有任何问题，请尝试删除 .animation 并将其替换为 withAnimation：

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

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

【讨论】：