SwiftUI中LinearGradient切换动画失效问题求助

问题原因 #

直接通过canUserPress条件判断返回两个不同的LinearGradient实例时，SwiftUI会将其视为视图替换操作（移除旧渐变、添加新渐变），而非对同一个视图的属性修改，因此无法触发平滑的属性动画。

解决方案 #

方案1：自定义可动画渐变视图 #

通过实现Animatable协议，让渐变的颜色数组成为可动画属性，使SwiftUI能在颜色集合之间插值过渡：

// 自定义可动画渐变视图
struct AnimatableGradient: View, Animatable {
    var colors: [Color]
    var startPoint: UnitPoint
    var endPoint: UnitPoint
    
    // 实现Animatable协议，将颜色转换为可动画的线性RGB组件
    var animatableData: [Color.RGBColorSpace.Linear] {
        get { colors.map { $0.convert(to: .linear).components } }
        set { colors = newValue.map { Color(rgbLinear: $0) } }
    }
    
    var body: some View {
        LinearGradient(gradient: Gradient(colors: colors), startPoint: startPoint, endPoint: endPoint)
    }
}

// 在ContentView中使用
struct ContentView: View {
    @AppStorage("streak") var streak = 0
    @AppStorage("streakHeight") var streakHeight = 0
    @AppStorage("canUserPress") var canUserPress = true
    
    @EnvironmentObject var model: ViewModel
    
    private let notAddedColors = [Color("backNotAdded1"), Color("backNotAdded2")]
    private let addedColors = [Color("backAdded1"), Color("backAdded2")]
    
    var body: some View {
        ZStack {
            AnimatableGradient(
                colors: canUserPress ? notAddedColors : addedColors,
                startPoint: .top,
                endPoint: .bottom
            )
            .animation(.easeInOut(duration: 2), value: canUserPress)
            .ignoresSafeArea()
            
            // ... 其他视图内容
        }
    }
}

方案2：通过@State管理渐变颜色，配合withAnimation #

用@State存储当前显示的颜色数组，在canUserPress状态变化时，用withAnimation包裹颜色数组的更新操作：

struct ContentView: View {
    @AppStorage("streak") var streak = 0
    @AppStorage("streakHeight") var streakHeight = 0
    @AppStorage("canUserPress") var canUserPress = true {
        didSet {
            // 状态变化时触发动画更新颜色数组
            withAnimation(.easeInOut(duration: 2)) {
                currentColors = canUserPress ? notAddedColors : addedColors
            }
        }
    }
    
    @EnvironmentObject var model: ViewModel
    @State private var currentColors = [Color("backNotAdded1"), Color("backNotAdded2")]
    
    private let notAddedColors = [Color("backNotAdded1"), Color("backNotAdded2")]
    private let addedColors = [Color("backAdded1"), Color("backAdded2")]
    
    var body: some View {
        ZStack {
            LinearGradient(
                gradient: Gradient(colors: currentColors),
                startPoint: .top,
                endPoint: .bottom
            )
            .ignoresSafeArea()
            
            // ... 其他视图内容
        }
    }
}

说明 #

两种方案的核心都是让SwiftUI识别到渐变颜色是同一个视图的可动画属性，而非切换不同视图实例，从而触发平滑的颜色过渡动画。

内容的提问来源于stack exchange，提问作者никита коломоец