如何使視圖的高度在 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 循環的索引，並將每個柱的 animation 延遲一段時間 * 該索引。 所有的條都通過綁定連接到同一個 state 變量，並且 state 在出現時立即設置。 您可以根據自己的喜好調整參數。

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 中應用onAppear ，而是在ForEach中應用了隱式 animation 。

結果：