0

我使用以下代码在 swiftUI 上创建了一个加载视图:

var body: some View {
    
    ZStack {
        Circle()
            .trim(from: 0, to: 0.2)
            .stroke(AngularGradient(gradient: .init(colors: [settings.colors[self.settings.accentColor]]), center: .center), style: StrokeStyle(lineWidth: 6, lineCap: .round))
            .rotationEffect(Angle(degrees: isLoading ? 360 : 0))
        
        Circle()
            .trim(from: 0.2, to: 0.4)
            .stroke(AngularGradient(gradient: .init(colors: [.red]), center: .center), style: StrokeStyle(lineWidth: 6, lineCap: .round))
            .rotationEffect(Angle(degrees: isLoading ? -360 : 0))
            .frame(height: aspect / 2)
        
        Circle()
            .trim(from: 0.5, to: 0.7)
            .stroke(AngularGradient(gradient: .init(colors: [settings.colors[self.settings.accentColor]]), center: .center), style: StrokeStyle(lineWidth: 6, lineCap: .round))
            .rotationEffect(Angle(degrees: isLoading ? 360 : 0))
        
        Circle()
            .trim(from: 0.7, to: 0.9)
            .stroke(AngularGradient(gradient: .init(colors: [.red]), center: .center), style: StrokeStyle(lineWidth: 6, lineCap: .round))
            .rotationEffect(Angle(degrees: isLoading ? -360 : 0))
            .frame(height: aspect / 2)
            .onAppear() {
                self.isLoading = true
            }
    }
    .animation(Animation.linear(duration: 0.5).repeatForever(autoreverses: false))
    .frame(width: aspect, height: aspect, alignment: .center)
}

在 swiftui 预览画布上,一切似乎都很好:

在此处输入图像描述

但是当在模拟器或真实设备上运行时,动画似乎被破坏了,它在动画时修改了视图位置,如下所示:

在此处输入图像描述

任何人都知道这是一个错误,还是我错过了一些东西。提前致谢。

4

0 回答 0