SwiftUI 二维颜色数组生成渐变切换时EaseIn动画失效求解

问题原因 #

SwiftUI 没有内置对 LinearGradient 的 colors 数组变更的属性插值动画能力，直接修改颜色数组时 withAnimation 无法识别为可动画的属性变化，所以只会直接刷新视图，没有过渡效果。
同时你原有代码中15秒的动画时长远大于1秒的定时器触发间隔，上一次动画还未执行完成就会被下一次切换打断，也是看不到动画效果的原因之一。

修复方案 #

给 LinearGradient 绑定索引作为唯一ID，搭配透明度过渡，让 SwiftUI 将每次渐变变更识别为视图切换，自动触发过渡动画：

修改后核心代码 #

ZStack {
    Rectangle()
        .ignoresSafeArea(.all)
        .foregroundColor(.clear)
        .background(
            LinearGradient(gradient: Gradient(colors: self.bgGradient), startPoint: .top, endPoint: .bottom)
                // 绑定渐变索引作为唯一标识
                .id(bgGradientIndex)
                // 采用透明度过渡模拟渐变切换效果
                .transition(.opacity)
        )
        .onReceive(timer) { _ in
            // 计算下一个索引，自动循环无需手动重启定时器
            let nextIndex = (bgGradientIndex + 1) % bgGradientArray.count
            // 动画时长需小于定时器触发间隔，避免被打断
            withAnimation(.easeIn(duration: 0.8)) {
                bgGradientIndex = nextIndex
                bgGradient = bgGradientArray[nextIndex].map { Color(hex: $0) }
            }
        }
}

可选优化方案 #

如果需要更平滑的自定义过渡效果，可以采用双层渐变叠加的方案：

• 维护两个渐变层，固定第一层显示当前渐变，第二层用于显示下一个渐变
• 切换时将第二层透明度从0调整为1，完成后将第一层更新为新的渐变，再把第二层透明度调回0，可实现完全无卡顿的渐变切换。

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