我使用以下代码在 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 预览画布上,一切似乎都很好:
但是当在模拟器或真实设备上运行时,动画似乎被破坏了,它在动画时修改了视图位置,如下所示:
任何人都知道这是一个错误,还是我错过了一些东西。提前致谢。