如何动画一个圆圈来填充而不是使用.trim？

Question

我在下面有这个环形视图，这个动画从 100% 的填充环开始并“未填充”到修剪量，我想反转动画，使其从 0 开始并填充到修剪量。

var progressAnimation: Animation {
        Animation
            .linear
            .speed(0.5)
            .delay(0.2)
     }
    
    var body: some View {
        VStack {
            ZStack {
                Circle()
                    .stroke(Color(.systemFill).opacity(0.5), style: StrokeStyle(lineWidth: lineWidth))
                    .frame(height: 125)
                Circle()
                    .trim(from: CGFloat(getTrimLevelForRingFromExertionLevel()), to: 1)
                    .stroke(ColorManager.getColorsForMetric(metricType: .Exertion(value: mostRecentEffortLevelObject?.effortLevel ?? 0)),
                        style: StrokeStyle(lineWidth: lineWidth, lineCap: .round, lineJoin: .round, miterLimit: .infinity, dash: [20, 0], dashPhase: 0))
                    .animation(self.progressAnimation, value: getTrimLevelForRingFromExertionLevel())
                    .rotationEffect(Angle(degrees: 90))
                    .rotation3DEffect(Angle(degrees: 180), axis: (x: 1, y: 0, z: 0))
                    .frame(height: 125)

Answer 1

您可能在不同的代码或模型中遇到问题，因为引用答案中的方法可以正常工作。

这是一个完整的演示。使用 Xcode 12.4 / iOS 14.4 测试

struct DemoView: View {
    @State private var progress = 0.0
    var body: some View {
        VStack {
            Circle()
                 .trim(from: 0.0, to: CGFloat(min(self.progress, 1.0)))
                 .stroke(Color.blue ,style: StrokeStyle(lineWidth: 25.0, lineCap: .round, lineJoin: .round))
                 .animation(.linear, value: progress)
                 .rotationEffect(Angle(degrees: 270.0))
                 .onAppear {
                    DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                        progress = 0.73
                    }
            }
        }.padding()
    }
}