SwiftUI 中的 LoadingView 在 iOS 14 上表现异常

LoadingView in SwiftUI behaves weirdly on iOS 14

在从 Internet 获取数据之前,我正在为我的一个视图使用 LoadingView。它曾经在 iOS 13 上看起来不错,但现在在 iOS 14 上看起来很奇怪,如视频所示:

Video

查看代码:

import SwiftUI

struct LoadingView: View {
    
    @State private var shouldAnimate = false
    
    var body: some View {
        HStack {
            Circle()
                .fill(Color.primary)
                .frame(width: 30, height: 30)
                .scaleEffect(shouldAnimate ? 1.0 : 0.5)
                .animation(Animation.easeInOut(duration: 0.5).repeatForever())
            Circle()
                .fill(Color.primary)
                .frame(width: 30, height: 30)
                .scaleEffect(shouldAnimate ? 1.0 : 0.5)
                .animation(Animation.easeInOut(duration: 0.5).repeatForever().delay(0.3))
            Circle()
                .fill(Color.primary)
                .frame(width: 30, height: 30)
                .scaleEffect(shouldAnimate ? 1.0 : 0.5)
                .animation(Animation.easeInOut(duration: 0.5).repeatForever().delay(0.6))
        }
        .onAppear {
            self.shouldAnimate = true
        }
    }
    
}

知道如何解决这个问题吗?

在我旋转 phone 之前,动画对我来说还不错,然后我开始看到像你这样的动画,圆圈在疯狂移动。

为了解决这个问题,我改为显式调用动画(使用 withAnimation),我重构代码使 PulsingCircle 成为自己的 View 类型:

struct PulsingCircle: View {
    let delay: Double
    let duration: Double
    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        Circle()
            .fill(Color.primary)
            .frame(width: 30, height: 30)
            .scaleEffect(scale)
            .onAppear {
                withAnimation(Animation.easeInOut(duration: duration)
                                       .repeatForever()
                                       .delay(delay))
                {
                    scale = 0.5
                }
            }
    }
}

struct LoadingView: View {
    
    var body: some View {
        HStack {
            PulsingCircle(delay: 0.0, duration: 0.5)
            PulsingCircle(delay: 0.3, duration: 0.5)
            PulsingCircle(delay: 0.6, duration: 0.5)
        }
    }
    
}