动画是动画化整个圆圈，而不是进度Xcode 13

Question

在xCode 11.4中，圆形动画表现正确。它导致进度环(边界内的圆圈(在提交底部表格几秒钟后出现延迟。现在它延迟了Xcode 13.2中整个圆圈的显示。

以下是完整的代码示例和视频示例：https://github.com/SimonSays1993/SwiftUI_Part2/blob/main/README.md

简而言之，这就是目前正在发生的事情。

在另一个视图中，有一张卡片，当我点击它时，我会切换一个显示底部表格的状态。然后，该状态被传递给BottomSheetView，然后通过绑定被传递到RingView。

然后我们使用这个值来显示RingView。RingView具有基于绑定变量show的延迟动画。这在显示CircleView时效果很好，但问题是当RingView出现时，我会将状态切换为true，然后尝试在圆的边界视图内启动第二个圆(称为进度环(的动画。

每次出现RingView时，进度环都已加载，并且其延迟的动画不起作用。

struct RingView: View {
var color1 = Color.red
var color2 = Color.purple
var width: CGFloat = 88
var height: CGFloat = 88
var percent: CGFloat = 88

@Binding var show: Bool
@State var progressCircle: Bool = false
var body: some View {
let multiplier = width / 44
let progress = 1 - (percent / 100)

return ZStack {
//The grey border circle
Circle()
.stroke(Color.black.opacity(0.1), style: StrokeStyle(lineWidth: 5 * multiplier))
.frame(width: width, height: height)

Circle()
.trim(from: progressCircle ? progress : 1, to: 1)
.stroke(style: StrokeStyle(lineWidth: 5 * multiplier, lineCap: .round))
.rotationEffect(Angle(degrees: 90))
.rotation3DEffect(Angle(degrees: 180), axis: (x: 1, y: 0, z: 0))
.frame(width: width, height: height)
.animation(.linear.delay(2.0), value: progressCircle)

Text("(Int(percent))%")
.font(.system(size: 14 * multiplier))
.fontWeight(.bold)
}
.animation(.linear.delay(1.5), value: show)
.onAppear {
self.progressCircle.toggle()
}
}
}

Answer 1

解决了我的问题，我需要为进度环添加更长的延迟。感谢我帖子中的评论员告诉我新的Animation()init

struct RingView: View {
var color1 = Color.red
var color2 = Color.purple
var width: CGFloat = 88
var height: CGFloat = 88
var percent: CGFloat = 88

@Binding var show: Bool
@State var progressCircle: Bool = false

var body: some View {
let multiplier = width / 44
let progress = 1 - (percent / 100)

return ZStack {
//Inactive String, the grey circle
Circle()
.stroke(Color.black.opacity(0.1), style: StrokeStyle(lineWidth: 5 * multiplier))
.frame(width: width, height: height)

Circle()
.trim(from: progressCircle ? progress : 1, to: 1)
.stroke(style: StrokeStyle(lineWidth: 5 * multiplier, lineCap: .round))
.rotationEffect(Angle(degrees: 90))
.rotation3DEffect(Angle(degrees: 180), axis: (x: 1, y: 0, z: 0))
.frame(width: width, height: height)
.animation(.linear(duration: 1.0).delay(2.0), value: progressCircle)

Text("(Int(percent))%")
.font(.system(size: 14 * multiplier))
.fontWeight(.bold)
}
.animation(.linear.delay(0.5), value: show)
.onAppear {
self.progressCircle.toggle()
}
}
}