iOS17下SwiftUI Charts中Mark的foregroundStyle动画失效问题排查

你遇到的问题是iOS17的SwiftUI Charts不支持foregroundStyle的颜色平滑动画过渡，这是系统版本的特性差异，并非代码逻辑错误。

原因说明 #

• iOS18对SwiftUI Charts的动画系统进行了扩展，新增了对样式属性（如颜色）的动画支持，因此你的代码在iOS18上能正常呈现颜色过渡效果；
• 而iOS17中，Charts的动画仅覆盖数值类属性（如柱子长度、坐标轴位置），foregroundStyle关联的颜色变化会直接突变，没有过渡动画。苹果官方文档虽未单独标注这一限制，但从iOS18的SwiftUI Charts更新说明中可以看到，iOS18明确增强了Charts的动画表现力，包含样式属性的动画支持。

你尝试的方案无效的原因 #

• 更换为LineMark、调整轴方向：本质都是受限于iOS17 Charts的动画支持范围，样式属性动画均不被支持；
• 使用withAnimation或.animation修饰符：这类方法仅负责触发动画，但系统本身不支持颜色属性的动画驱动，因此无法生效。

iOS17下的替代方案 #

如果需要在iOS17上实现近似的颜色过渡动画，可以通过自定义可动画修饰符模拟，示例代码如下：

struct ContentView: View {
    struct Month: Identifiable, Equatable {
        var id: String { name }
        let value: Double
        let name: String
        let color: Color
    }
    
    @State var months: [Month] = [
        .init(value: 100, name: "Jan", color: .red),
        .init(value: 150, name: "Feb", color: .red),
        .init(value: 200, name: "Mar", color: .red),
    ]
    
    var body: some View {
        VStack {
            Chart {
                ForEach(months) { month in
                    BarMark(
                        x: .value("", month.value),
                        y: .value("", month.name)
                    )
                    .modifier(AnimatableColorStyle(color: month.color))
                }
            }
            .frame(height: 122)
            .animation(.smooth, value: months)
            
            Button("Change") {
                months = [
                    .init(value: 250, name: "Jan", color: .blue),
                    .init(value: 70, name: "Feb", color: .blue),
                    .init(value: 300, name: "Mar", color: .blue),
                ]
            }
        }
    }
}

// 自定义可动画颜色修饰符
struct AnimatableColorStyle: AnimatableModifier {
    var color: Color
    
    var animatableData: Color.RGBColorSpace.AnimatableData {
        get { color.rgb.animatableData }
        set { color = Color(rgb: .init(animatableData: newValue)) }
    }
    
    func body(content: Content) -> some View {
        content.foregroundStyle(color)
    }
}

注意：该方案是模拟动画，在iOS17的Charts中效果可能不如iOS18原生流畅，但可以实现近似的颜色过渡效果。

内容的提问来源于stack exchange，提问作者BlackWolf