list - SwiftUI:列表中的动画圆圈

Question

我有以下代码，我用它来创建一个列表，每个元素中都有一个圆圈。

我的目标是在打开 View 时有一个“圆形填充动画”。在这种情况下，蓝色应填充到给定的百分比级别。圆圈和列表正在工作，但是当加载列表/用户访问 View 时我的动画没有启动。

知道我做错了什么吗？

struct CircleListView: View {
    
    @State var percentage: CGFloat = 75
    
    var body: some View {
        
        List {
            ForEach(1..<10) { element in
                ZStack {
                    TrackCircle()
                    ProgressCircle(percentage: percentage)
                }
            }
        }
    }
}

struct ProgressCircle: View {
    var percentage: CGFloat
    
    var body: some View {
        ZStack {
            Circle()
                .trim(from: 0, to: (percentage * 0.01))
                .stroke(style: StrokeStyle(lineWidth: 8, lineCap: .round, lineJoin: .round))
                .fill(Color.blue)
                .rotationEffect(.degrees(270))
                .animation(.spring(response: 2.0, dampingFraction: 1.0, blendDuration: 1.0))
        }
    }
}

struct TrackCircle: View {
    var body: some View {
        ZStack {
            Circle()
                .stroke(style: StrokeStyle(lineWidth: 8))
                .fill(Color.red)
        }
    }
}

非常感谢!

Answer 1

当检测到可动画属性发生变化时，动画就会开始。提供的代码是静态的 - 没有运行时更改，因此没有动画。

这里是修改后的演示，激事件画(使用 Xcode 12.1/iOS 14.1 测试)

@State var percentage: CGFloat = 0     // << initial state

var body: some View {
    
    List {
        ForEach(1..<10) { element in
            ZStack {
                TrackCircle()
                ProgressCircle(percentage: percentage)
            }
        }
    }
    .onAppear { percentage = 75 }     // << changed state
}