SwiftUI自定义图表：实现矩形交错淡入动画方案问询

你的代码存在几个关键问题导致交错淡入效果未达标：

• 初始visibleRectangles为空数组，通过append扩展数组的方式无法直接对应ForEach的固定索引，导致部分矩形的opacity判断逻辑混乱
• 未使用SwiftUI的withAnimation触发平滑过渡，直接修改opacity值没有动画效果
• onAppear绑定在单个矩形上，触发顺序无法保证严格按索引执行

以下是修正后的代码，实现每个矩形依次延迟0.5秒淡入的效果：

import SwiftUI

struct ChartBar: View {
    // 初始化数组为全false，长度与矩形数量一致
    @State private var visibleRectangles = Array(repeating: false, count: 5)

    var body: some View {
        VStack {
            ZStack(alignment: .bottom) {
                RoundedRectangle(cornerRadius: 8)
                    .fill(Color.gray.opacity(0.1))
                    .frame(width: 10)
                VStack(spacing: 1) {
                    ForEach(0..<5, id: \.self) { index in
                        Rectangle()
                            .fill(Color.blue)
                            .frame(width: 10, height: 20)
                            // 直接根据对应索引的布尔值设置透明度
                            .opacity(visibleRectangles[index] ? 1 : 0)
                    }
                }
            }

            Text("31/12")
                .font(.system(size: 20))
                .foregroundColor(Color.black.opacity(0.7))
                .background(RoundedRectangle(cornerRadius: 4).fill(Color.gray.opacity(0.1)))
        }
        // 在根视图的onAppear中统一触发动画逻辑，保证顺序
        .onAppear {
            for index in 0..<5 {
                DispatchQueue.main.asyncAfter(deadline: .now() + Double(index) * 0.5) {
                    // 使用withAnimation触发平滑的淡入过渡
                    withAnimation(.easeInOut) {
                        visibleRectangles[index] = true
                    }
                }
            }
        }
    }
}

struct ContentView: View {
    var body: some View {
        ChartBar()
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

关键修改说明： #

1. 状态初始化优化：将visibleRectangles初始化为长度5的全false数组，每个索引直接对应一个矩形的显示状态，避免数组动态扩展带来的索引匹配问题。
2. 统一动画触发逻辑：将动画触发代码移到根视图的onAppear中，确保按索引顺序依次延迟执行，避免单个矩形onAppear触发顺序不可控的问题。
3. 使用withAnimation：修改状态时包裹在withAnimation中，让SwiftUI自动处理透明度的平滑过渡动画，实现自然的淡入效果。
4. 简化opacity判断：因为数组长度与矩形数量完全匹配，无需额外判断索引是否存在，直接使用visibleRectangles[index]控制透明度。

内容的提问来源于stack exchange，提问作者Luka Šalipur