SwiftUI：动画列表中的圆圈

Posted 2023-02-24

【中文标题】SwiftUI：动画列表中的圆圈

【英文标题】：SwiftUI: Animate Circles in List

【发布时间】：2020-11-24 14:30:40

【问题描述】：

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

我的目标是在视图打开时有一个“圆形填充动画”。在这种情况下，蓝色应该填充到给定的百分比水平。 Circles 和 List 正在工作，但是当 List 加载/用户访问视图时，我的动画没有启动。

任何想法我做错了什么？

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)
        
    

非常感谢！

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