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

Posted 2023-02-23

【中文标题】如何动画一个圆圈来填充而不是使用.trim？

【英文标题】：How to animate a circle to fill instead of using .trim?

【发布时间】：2021-01-29 14:05:09

【问题描述】：

我在下面有这个环形视图，这个动画从 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)

【问题讨论】：

这是否回答了您的问题***.com/a/64685825/12299030？

这是我在上一个问题中遇到的另一个问题，是的，效果很好！但在我的问题中：我们正在构建一个圆圈，然后对其进行修剪，但是我想将修剪设置为从 0 到修剪而不是从 100% 到修剪。

【参考方案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()
    

【讨论】：

对不起，我以为您只是指答案中的一行，而不是另一个问题的整个代码。效果很好！ ?