SwiftUI中LinearGradient颜色切换动画瞬间完成，如何修复？

问题原因 #

SwiftUI的LinearGradient本身不支持直接对其内部Gradient的颜色做平滑动画：

• Gradient结构体未遵循Animatable协议，当你修改渐变颜色时，系统会直接替换整个LinearGradient实例，而非对颜色值进行插值过渡，导致颜色瞬间切换。
• 你之前的两种写法，本质都是触发视图重新渲染时生成新的LinearGradient，因此无法得到平滑的动画效果。

解决方案 #

提供两种可行的实现方式：

方式一：纯SwiftUI自定义可动画渐变视图 #

通过遵循Animatable协议，让渐变的颜色值可以被SwiftUI的动画系统插值计算：

// 自定义可动画的线性渐变视图
struct AnimatedLinearGradient: View, Animatable {
    var startColor: Color
    var endColor: Color
    var startPoint: UnitPoint
    var endPoint: UnitPoint
    
    // 将颜色转为可动画的RGBA数据
    var animatableData: AnimatablePair<Color.RGBAnimatableData, Color.RGBAnimatableData> {
        get {
            AnimatablePair(startColor.rgbAnimatableData, endColor.rgbAnimatableData)
        }
        set {
            startColor = Color(rgbAnimatableData: newValue.first)
            endColor = Color(rgbAnimatableData: newValue.second)
        }
    }
    
    var body: some View {
        LinearGradient(
            gradient: Gradient(colors: [startColor, endColor]),
            startPoint: startPoint,
            endPoint: endPoint
        )
    }
}

// 扩展Color，实现RGBA数据与Color的互转
extension Color {
    var rgbAnimatableData: RGBAnimatableData {
        let uiColor = UIColor(self)
        var red: CGFloat = 0, green: CGFloat = 0, blue: CGFloat = 0, alpha: CGFloat = 0
        uiColor.getRed(&red, green: &green, blue: &blue, alpha: &alpha)
        return RGBAnimatableData(red: red, green: green, blue: blue, alpha: alpha)
    }
    
    init(rgbAnimatableData: RGBAnimatableData) {
        self.init(
            red: rgbAnimatableData.red,
            green: rgbAnimatableData.green,
            blue: rgbAnimatableData.blue,
            opacity: rgbAnimatableData.alpha
        )
    }
}

// 定义可动画的RGBA数据结构
struct RGBAnimatableData: VectorArithmetic {
    var red: CGFloat
    var green: CGFloat
    var blue: CGFloat
    var alpha: CGFloat
    
    static var zero: RGBAnimatableData {
        RGBAnimatableData(red: 0, green: 0, blue: 0, alpha: 0)
    }
    
    static func + (lhs: RGBAnimatableData, rhs: RGBAnimatableData) -> RGBAnimatableData {
        RGBAnimatableData(
            red: lhs.red + rhs.red,
            green: lhs.green + rhs.green,
            blue: lhs.blue + rhs.blue,
            alpha: lhs.alpha + rhs.alpha
        )
    }
    
    static func - (lhs: RGBAnimatableData, rhs: RGBAnimatableData) -> RGBAnimatableData {
        RGBAnimatableData(
            red: lhs.red - rhs.red,
            green: lhs.green - rhs.green,
            blue: lhs.blue - rhs.blue,
            alpha: lhs.alpha - rhs.alpha
        )
    }
    
    static func * (lhs: RGBAnimatableData, rhs: Double) -> RGBAnimatableData {
        RGBAnimatableData(
            red: lhs.red * CGFloat(rhs),
            green: lhs.green * CGFloat(rhs),
            blue: lhs.blue * CGFloat(rhs),
            alpha: lhs.alpha * CGFloat(rhs)
        )
    }
    
    mutating func scale(by rhs: Double) {
        red *= CGFloat(rhs)
        green *= CGFloat(rhs)
        blue *= CGFloat(rhs)
        alpha *= CGFloat(rhs)
    }
    
    var magnitudeSquared: Double {
        Double(red * red + green * green + blue * blue + alpha * alpha)
    }
}

使用示例：

struct GradientView: View {
    @State var currentTopColor = Color.white
    let colors: [Color] = [.blue, .pink, .red]
    
    var body: some View {
        AnimatedLinearGradient(
            startColor: currentTopColor,
            endColor: .white,
            startPoint: .top,
            endPoint: .bottom
        )
        .onTapGesture {
            withAnimation(.easeInOut(duration: 1)) {
                currentTopColor = colors.randomElement()!
            }
        }
    }
}

方式二：借助UIKit的CAGradientLayer实现 #

利用UIKit的核心动画系统，直接给渐变层添加颜色过渡动画，代码更简洁：

// 包装UIKit的渐变层
struct UIKitAnimatedGradient: UIViewRepresentable {
    var startColor: UIColor
    var endColor: UIColor
    var startPoint: CGPoint
    var endPoint: CGPoint
    
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        view.backgroundColor = .clear
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
        gradientLayer.startPoint = startPoint
        gradientLayer.endPoint = endPoint
        gradientLayer.frame = view.bounds
        view.layer.addSublayer(gradientLayer)
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
        guard let gradientLayer = uiView.layer.sublayers?.first as? CAGradientLayer else { return }
        // 添加颜色过渡动画
        let colorAnimation = CABasicAnimation(keyPath: "colors")
        colorAnimation.fromValue = gradientLayer.colors
        colorAnimation.toValue = [startColor.cgColor, endColor.cgColor]
        colorAnimation.duration = 1
        colorAnimation.fillMode = .forwards
        colorAnimation.isRemovedOnCompletion = false
        gradientLayer.add(colorAnimation, forKey: "colorChange")
        // 更新图层属性，避免动画结束后回退
        gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
        gradientLayer.startPoint = startPoint
        gradientLayer.endPoint = endPoint
        gradientLayer.frame = uiView.bounds
    }
}

使用示例：

struct GradientView: View {
    @State var currentTopColor = Color.white
    let colors: [Color] = [.blue, .pink, .red]
    
    var body: some View {
        UIKitAnimatedGradient(
            startColor: UIColor(currentTopColor),
            endColor: .white,
            startPoint: CGPoint(x: 0.5, y: 0), // 对应SwiftUI的.top
            endPoint: CGPoint(x: 0.5, y: 1) // 对应SwiftUI的.bottom
        )
        .onTapGesture {
            currentTopColor = colors.randomElement()!
        }
    }
}

两种方式对比 #

• 方式一：纯SwiftUI实现，完全适配SwiftUI的动画系统，无跨框架依赖，但需要编写较多的可动画协议相关代码。
• 方式二：借助UIKit核心动画，代码量少，动画效果稳定，适合快速实现需求。

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