SwiftUI中基于不同颜色模型实现颜色动画的问题

问题根源 #

SwiftUI默认对Color类型的动画是在RGB颜色空间进行线性插值，这种方式会导致不同颜色过渡时中间色普遍偏浅（比如蓝色到橙色的过渡会出现偏灰的中间色），因为RGB空间的线性混合不符合人眼对颜色感知的规律。

简化HSB颜色动画实现（避免多状态变量） #

你不需要为每个颜色的HSB分量单独声明状态变量，只需要通过封装或轻量数据结构统一管理颜色属性，SwiftUI的动画系统可以自动处理多属性的插值。

方案1：自定义可动画HSB结构体 #

让自定义HSB结构体遵循Animatable协议，SwiftUI会自动处理所有属性的动画插值，仅需一个状态变量即可：

import SwiftUI

struct HSBColor: Animatable {
    var hue: Double
    var saturation: Double
    var brightness: Double
    var opacity: Double = 1.0
    
    // 实现Animatable协议，定义动画插值的属性集合
    var animatableData: AnimatablePair<AnimatablePair<Double, Double>, Double> {
        get { AnimatablePair(AnimatablePair(hue, saturation), brightness) }
        set {
            hue = newValue.first.first
            saturation = newValue.first.second
            brightness = newValue.second
        }
    }
    
    // 转换为SwiftUI Color
    var color: Color {
        Color(hue: hue, saturation: saturation, brightness: brightness, opacity: opacity)
    }
    
    // 从UIColor初始化
    init(_ uiColor: UIColor) {
        var h: CGFloat = 0, s: CGFloat = 0, b: CGFloat = 0, a: CGFloat = 0
        uiColor.getHue(&h, saturation: &s, brightness: &b, alpha: &a)
        hue = Double(h)
        saturation = Double(s)
        brightness = Double(b)
        opacity = Double(a)
    }
}

struct ColorAnimationView: View {
    static let palette: [HSBColor] = [
        HSBColor(.blue),
        HSBColor(.orange),
        HSBColor(.indigo)
        // 可直接添加更多颜色，无需额外状态变量
    ]
    
    @State private var currentHSB: HSBColor = HSBColor(.blue)
    // 调整定时器间隔与动画时长匹配，避免动画叠加混乱
    let timer = Timer.publish(every: 1, on: .current, in: .common).autoconnect()
    
    var body: some View {
        Rectangle()
            .foregroundColor(currentHSB.color)
            .onReceive(timer) { _ in
                currentHSB = palette.randomElement()!
            }
            .animation(.easeInOut(duration: 0.6), value: currentHSB)
    }
}

方案2：用元组轻量管理HSB属性 #

如果不想自定义结构体，直接用元组存储HSB值，SwiftUI同样支持元组的动画插值：

struct ColorAnimationView: View {
    static let palette: [Color] = [.blue, .orange, .indigo]
    @State private var hsb: (hue: Double, saturation: Double, brightness: Double) = (0.5, 1, 1) // 初始蓝色的HSB值
    let timer = Timer.publish(every: 1, on: .current, in: .common).autoconnect()
    
    var body: some View {
        Rectangle()
            .foregroundColor(Color(hue: hsb.hue, saturation: hsb.saturation, brightness: hsb.brightness))
            .onReceive(timer) { _ in
                guard let randomColor = palette.randomElement() else { return }
                var h: CGFloat = 0, s: CGFloat = 0, b: CGFloat = 0, a: CGFloat = 0
                UIColor(randomColor).getHue(&h, saturation: &s, brightness: &b, alpha: &a)
                hsb = (Double(h), Double(s), Double(b))
            }
            .animation(.easeInOut(duration: 0.6), value: hsb)
    }
}

关键说明 #

• 颜色空间选择：HSB/HSL空间的插值更符合人眼感知，过渡中间色更自然。若偏好更柔和的亮度过渡，可将getHue(_:saturation:brightness:alpha:)替换为getHue(_:saturation:lightness:alpha:)（iOS 13+支持），实现HSL空间的动画。
• 状态变量简化：无论调色板有多少颜色，都只需要一个状态变量管理当前颜色的HSB/HSL属性，无需为每个颜色单独声明状态。
• 动画节奏优化：原代码定时器间隔与动画时长均为1/15秒，会导致动画未完成就切换颜色，建议调整定时器间隔大于等于动画时长，让过渡更流畅。

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