View 在iOS 14上，SwiftUI中加载视图的行为异常

在从internet获取数据之前，我正在为我的一个视图使用LoadingView。它过去在iOS 13上看起来不错，但现在在iOS 14上看起来很奇怪，如本视频所示：

查看代码：

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

---

你知道怎么解决这个问题吗？

在我旋转手机之前，动画看起来很好，然后我开始看到一个像你这样的动画，圆圈疯狂地移动

为了修复它，我改为显式调用动画（使用

withAnimation

），并重构代码，使

PulsingCircle

成为自己的

视图

类型：

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

---

在LoadingView的预览中，我没有遇到此问题。。因此，这一定是父视图的问题。从视频来看，其中一个父视图似乎正在屏幕上设置动画-可能是因为在加载数据之前，视图的帧不是全屏。解决方案是确定哪个视图正在制作动画，并在该视图上调用.animation（.none）和/或在加载时用空白内容填充父视图，以便视图仍然显示，但用户无法看到它。。。（甜蜜动画顺便说一句）