如何在 SwiftUI 中使视图的高度从 0 动画到高度？

Question

我想让这个条形图的高度（较大条形图的一部分）在从 0 到其给定高度的动画上显示，但我在 SwiftUI 中无法完全弄清楚？我发现这段代码很有帮助，但只有第一条（共 7 个）动画：

struct BarChartItem: View {
    
    var value: Int
    var dayText: String
    var topOfSCaleColorIsRed: Bool
    
    @State var growMore: CGFloat = 0
    @State var showMore: Double = 0
    
    var body: some View {
        VStack {
            Text("\(value)%")
                .font(Font.footnote.monospacedDigit())
            RoundedRectangle(cornerRadius: 5.0)
                .fill(getBarColor())
                .frame(width: 40, height: growMore)
                .onAppear {
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                        withAnimation(.linear(duration: 7.0)) {
                            growMore = CGFloat(value)
                            showMore = 1
                        }
                    }
                }.opacity(showMore)
            Text(dayText.uppercased())
                .font(.caption)
            
            
        }
        
    }

这是图表：

 HStack(alignment: .bottom) {
                    ForEach(pastRecoveryScoreObjects) { pastRecoveryScoreObject in
                        BarChartItem(value: pastRecoveryScoreObject.recoveryScore, dayText: "\(pastRecoveryScoreObject.date.weekdayName)", topOfSCaleColorIsRed: false)
                    }
                }

Answer 1

这很有效：您可以获取 ForEach 循环的索引并将每个条形的动画延迟一段时间 * 该索引。所有的条都通过绑定连接到同一个状态变量，并且状态在出现时立即设置。您可以根据自己的喜好调整参数。

struct TestChartAnimationView: View {
    let values = [200, 120, 120, 90, 10, 80]
    @State var open = false
    
    var animationTime: Double = 0.25
    
    var body: some View {
        VStack {
            Spacer()
            HStack(alignment: .bottom) {
                ForEach(values.indices, id: \.self) { index in
                    BarChartItem(open: $open, value: values[index])
                        .animation(
                            Animation.linear(duration: animationTime).delay(animationTime * Double(index))
                        )
                }
            }
        }
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                open = true
            }
        }
    }
}

struct BarChartItem: View {
    @Binding var open: Bool
    var value: Int
    
    var body: some View {
        VStack {
            Text("\(value)%")
                .font(Font.footnote.monospacedDigit())
            RoundedRectangle(cornerRadius: 5.0)
                .fill(Color.blue)
                .frame(width: 20, height: open ? CGFloat(value) : 0)
            Text("Week".uppercased())
                .font(.caption)
        }
    }
}

Answer 2

编辑：ForEach 动画有点奇怪。我不知道为什么，但这有效：

struct ContentView: View {
    let values = [200, 120, 120, 90, 10, 80]
    var body: some View {
        HStack(alignment: .bottom) {
            ForEach(values, id: \.self) { value in
                BarChartItem(totalValue: value)
                    .animation(.linear(duration: 3))
            }
        }
    }
}
struct BarChartItem: View {
    @State var value: Int = 0
    var totalValue = 0
    
    var body: some View {
        VStack {
            Text("\(value)%")
                .font(Font.footnote.monospacedDigit())
            RoundedRectangle(cornerRadius: 5.0)
                .fill(Color.blue)
                .frame(width: 20, height: CGFloat(value))
            Text("Week".uppercased())
                .font(.caption)
            
        }.onAppear {
            value = totalValue
        }
    }
}

我没有在onAppear 中应用动画，而是在ForEach 中应用了一个隐式动画。

结果：