0

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

这是带有视频示例的完整代码示例： https ://github.com/SimonSays1993/SwiftUI_Part2/blob/main/README.md

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

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

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

每次出现 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()
        }
    }
}
4

1 回答 1

0

解决了我的答案，我需要为进度环圈添加更长的延迟。感谢我帖子中的评论员告诉我新的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()
        }
    }
}
于 2022-01-13T21:00:37.680 回答