SwiftUI:更改动画进度条(或一般形状绘图)的起始位置

Question

下面的代码从左下角开始绘制一个矩形。我怎样才能改变它从顶部中间开始绘制？希望我在这里缺少一个简单的设置。

@State private var progress: Double = 0
@State private var timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()

var body: some View {
    VStack{
        HStack{
            ZStack {
                Rectangle()
                    .stroke(lineWidth: 20.0)
                    .opacity(0.3)
                    .foregroundColor(Color.gray)
                    .rotationEffect(Angle(degrees: 270.0))
                    .frame(width: 100, height:100)
                Rectangle()
                    .trim(from: 0.0, to: CGFloat(min(self.progress, 1.0)))
                    .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                    .foregroundColor(Color.blue)
                    .rotationEffect(Angle(degrees: 270.0))
                    .animation(.linear)
                    .frame(width: 100, height:100)
                    .onReceive(timer, perform: { _ in
                        if(progress < 100){
                            progress += 0.1/10
                        }
                        else{
                            progress = 0
                        }
                    })
            }
        }
        .padding()
    }
}

Answer 1

你不需要旋转它(而且它可能不是正方形)，只需在任何需要的地方创建自己的矩形形状。

使用 Xcode 12.4/iOS 14.4 准备的演示

struct MyRectangle: Shape {
    func path(in rect: CGRect) -> Path {
        Path {
            $0.move(to: CGPoint(x: rect.midX, y: rect.minY))
            $0.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
            $0.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
            $0.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
            $0.addLine(to: CGPoint(x: rect.minX, y: rect.minY))
            $0.addLine(to: CGPoint(x: rect.midX, y: rect.minY))
        }
    }
}

struct ContentView: View {
    @State private var progress: Double = 0
    @State private var timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()

    var body: some View {
        VStack{
            HStack{
                ZStack {
                    MyRectangle()
                        .stroke(lineWidth: 20.0)
                        .opacity(0.3)
                        .foregroundColor(Color.gray)
                        .frame(width: 200, height:100)
                    MyRectangle()
                        .trim(from: 0.0, to: CGFloat(min(self.progress, 1.0)))
                        .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                        .foregroundColor(Color.blue)
                        .animation(.linear)
                        .frame(width: 200, height:100)
                        .onReceive(timer, perform: { _ in
                            if(progress < 100){
                                progress += 0.1/10
                            }
                            else{
                                progress = 0
                            }
                        })
                }
            }
            .padding()
        }
    }
}